特效介绍
jquery时间轴特效
网站时间轴文章列表jquery特效，支持鼠标滚动，滚动鼠标时，时间和标题会从两侧移动到中间，当前时间和标题会显示成绿色，同时上面的时间会显示对应的年份。鼠标移动到上面的年份，年份能够旋转，使用了css3的transform 属性，适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
使用方法
1、在head引入下面的相关文件：
<link rel="stylesheet" type="text/css" href="css/history.css"> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.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>2、在html引入下面的代码：
<div id="arrow"> <ul> <li class="arrowup"></li> <li class="arrowdown"></li> </ul> </div> <div id="history"> <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> <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> <li> <div class="liwrap"> <div class="lileft"> <div class="date"> <span class="year">2013</span> <span class="md">0528</span> </div> </div> <div class="point"><b></b></div> <div class="liright"> <div class="histt"><a href="#">官方微博</a></div> <div class="hisct">推出了HTML5 CSS3 官方微博</div> </div> </div> </li> <li> <div class="liwrap"> <div class="lileft"> <div class="date"> <span class="year">2013</span> <span class="md">0524</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">0508</span> </div> </div> <div class="point"><b></b></div> <div class="liright"> <div class="histt"><a href="#">初期讨论</a></div> <div class="hisct">在集体探讨下，发现目前的HTML5 CSS3 发展历程已经不能满足需求，集体讨论=，这时候，韩老师之前的设计稿被端上了会议桌。</div> </div> </div> </li> <li> <div class="liwrap"> <div class="lileft"> <div class="date"> <span class="year">2012</span> <span class="md">0701</span> </div> </div> <div class="point"><b></b></div> <div class="liright"> <div class="histt"><a href="#">灵感迸发</a></div> <div class="hisct">某天晚上的凌晨三点一刻，预想建立这样一个功能的网站，专为网页设计师。</div> </div> </div> </li> <li> <div class="liwrap"> <div class="lileft"> <div class="date"> <span class="year">2012</span> <span class="md">0524</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">3月1日</span> </div> </div> <div class="point"><b></b></div> <div class="liright"> <div class="histt"><a href="#">初见成效</a></div> <div class="hisct">我爱模板网上线</div> </div> </div> </li> </ul> </div> </div>
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！