jquery网站发展历史时间轴是一款可以用右侧的上下箭头切换上下查看,也可以用鼠标滚轮进行上下切换、切换的过程中有类似flash的切换效果。
使用方法
1.头部调用
<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>
2.html代码调用
复制代码代码如下:
- <div id="arrow">
- <ul>
- <li class="arrowup"></li>
- <li class="arrowdown"></li>
- </ul>
- </div>
-
- <div id="history">
- <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
- <div class="title">
- <h2>网站成长史</h2>
- <div id="circle">
- <div class="cmsk"></div>
- <div class="circlecontent">
- <div thisyear="2014" 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>
- <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
- <div id="content">
- <ul class="list">
- <li style="margin-top:-110px;">
- <div class="liwrap">
- <div class="lileft">
- <div class="date">
- <span class="year">2014</span>
- <span class="md">0427</span>
- </div>
- </div>
-
- <div class="point"><b></b></div>
-
- <div class="liright">
- <div class="histt"><a href="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 发布</a></div>
- <div class="hisct">修正了上一版本中的错误,欢迎大家测试,如果发现问题请联系我们,谢谢。</div>
- </div>
- </div>
- </li>
- <li>
- <div class="liwrap">
- <div class="lileft">
- <div class="date">
- <span class="year">2014</span>
- <span class="md">0426</span>
- </div>
- </div>
-
- <div class="point"><b></b></div>
- <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
-
- <div class="liright">
- <div class="histt"><a href="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 发布</a></div>
- <div class="hisct">随着用户的访问量增大,功能不能满足需求,我们进行了重大更新,对设计和功能都进行大幅度的升级,增加了原创,欣赏版块</div>
- </div>
- </div>
- </li>
- <li>
- <div class="liwrap">
- <div class="lileft">
- <div class="date">
- <span class="year">2014</span>
- <span class="md">0425</span>
- </div>
- </div>
-
- <div class="point"><b></b></div>
-
- <div class="liright">
- <div class="histt"><a href="https://b5.mxunkeji.com">官方微博</a></div>
- <div class="hisct">推出了HTML5 CSS3 官方微博</div>
- </div>
- </div>
- </li>
- <li>
- <div class="liwrap">
-
- <div class="lileft">
- <div class="date">
- <span class="year">2014</span>
- <span class="md">0424</span>
- </div>
- </div>
-
- <div class="point"><b></b></div>
- <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
- <div class="liright">
- <div class="histt"><a href="https://b5.mxunkeji.com">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="https://b5.mxunkeji.com">初期讨论</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>
- <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
- <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="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 上线</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">3月1日</span>
- </div>
- </div>
-
- <div class="point"><b></b></div>
-
- <div class="liright">
- <div class="histt"><a href="https://b5.mxunkeji.com">初见成效</a></div>
- <div class="hisct">代码笔记第一版上线</div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
-