注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery制作动感十足的日志时间轴可上下查看也可

jQuery插件 fishcity 3020浏览

    今天jQ酷分享一款用jquery制作的动感十足的时间轴源码,它可以用右侧的上下箭头切换上下查看,也可以用鼠标滚轮滚动进行上下切换,经测试切换的过程中有类似flash的切换效果,感觉相当不错,推荐日志网站或是里程页面使用它,为您的网站增添漂亮且引的人动感效果!

第一步:引入核心文件和CSS样式,这里用到4个JS,一个CSS,当然CSS可根据您设计的页面来灵活修改,前提你要懂CSS。

<link rel="stylesheet" type="text/css" href="css/history.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/history.js"></script>

第二步:Html结构,不算复杂,直接贴上,简单的注释下。

<!-- 右边可点击上下滚动的上下箭头--> 
<div id="arrow">
    <ul>
	<li class="arrowup"></li>
	<li class="arrowdown"></li>
    </ul>
</div>
<!-- 头部的年份-->
<div class="title">
  <h2>日志时间轴</h2>
  <div id="circle">
    <div class="cmsk"></div>
    <div class="circlecontent">
      <div thisyear="2013" class="timeblock"> <span class="numf"></span> <span class="nums"></span> <span class="numt"></span> <span class="numfo"></span>
        <div class="clear"></div>
      </div>
      <div class="timeyear">YEAR</div>
    </div>
    <a href="#" class="clock"></a> </div>
</div>
<!--下面是列表内容,这里仅列两个记录,一个记录为一个li标签内容,需要更多请自行添加-->
<div id="content">
<ul class="list">
  <li style="margin-top:-110px;">
    <div class="liwrap">
      <div class="lileft"> div class="date"> <span class="year">2013</span> <span class="md">0905</span> </div>
    </div>
    <div class="point"><b></b></div>
    <div class="liright">
      <div class="histt"><a href="#">HTML5 CSS3 发展历程 发布</a></div>
      <div class="hisct">修正了上一版本中的错误,欢迎大家测试,如果发现问题请联系我们,谢谢。</div>
    </div>
  </div>
  </li>
  <li>
    <div class="liwrap">
      <div class="lileft">
        <div class="date"> <span class="year">2013</span> <span class="md">0807</span> </div>
      </div>
      <div class="point"><b></b></div>
      <div class="liright">
        <div class="histt"><a href="#">HTML5 CSS3 发展历程 发布</a></div>
        <div class="hisct">随着用户的访问量增大,功能不能满足需求,我们进行了重大更新,对设计和功能都进行大幅度的升级,增加了原创,欣赏版块</div>
      </div>
    </div>
  </li>
</ul>
</div>

OK,现在来预览下吧,不要被吓到了哦,就这么简单,一个动感漂亮高端大气的日志时间轴就做好了。

转载请注明:jQ酷 » jquery制作动感十足的日志时间轴可上下查看也可

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。