PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > Jquery插件 > jQuery日期时间 > 正文

    jquery网站发展历史时间轴

    作者:admin来源:B5教程网浏览:时间:2014-04-27 18:50:50我要评论
    分享到

    内容介绍

    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代码调用

     
    复制代码代码如下:
    1. <div id="arrow">
    2.     <ul>
    3.         <li class="arrowup"></li>
    4.         <li class="arrowdown"></li>
    5.     </ul>
    6. </div>
    7.  
    8. <div id="history">
    9. <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
    10.     <div class="title">
    11.         <h2>网站成长史</h2>
    12.         <div id="circle">
    13.             <div class="cmsk"></div>
    14.             <div class="circlecontent">
    15.                 <div thisyear="2014" class="timeblock">
    16.                     <span class="numf"></span>
    17.                     <span class="nums"></span>
    18.                     <span class="numt"></span>
    19.                     <span class="numfo"></span>
    20.                     <div class="clear"></div>
    21.                 </div>
    22.                 <div class="timeyear">YEAR</div>
    23.             </div>
    24.             <a href="#" class="clock"></a>
    25.         </div>
    26.     </div>
    27.     <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
    28.     <div id="content">
    29.         <ul class="list">
    30.             <li style="margin-top:-110px;">
    31.                 <div class="liwrap">
    32.                     <div class="lileft">
    33.                         <div class="date">
    34.                             <span class="year">2014</span>
    35.                             <span class="md">0427</span>
    36.                         </div>
    37.                     </div>
    38.                     
    39.                     <div class="point"><b></b></div>
    40.                     
    41.                     <div class="liright">
    42.                         <div class="histt"><a href="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 发布</a></div>
    43.                         <div class="hisct">修正了上一版本中的错误,欢迎大家测试,如果发现问题请联系我们,谢谢。</div>
    44.                     </div>
    45.                 </div>
    46.             </li>
    47.             <li>
    48.                 <div class="liwrap">
    49.                     <div class="lileft">
    50.                         <div class="date">
    51.                             <span class="year">2014</span>
    52.                             <span class="md">0426</span>
    53.                         </div>
    54.                     </div>
    55.                     
    56.                     <div class="point"><b></b></div>
    57.                     <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
    58.  
    59.                     <div class="liright">
    60.                         <div class="histt"><a href="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 发布</a></div>
    61.                         <div class="hisct">随着用户的访问量增大,功能不能满足需求,我们进行了重大更新,对设计和功能都进行大幅度的升级,增加了原创,欣赏版块</div>
    62.                     </div>
    63.                 </div>
    64.             </li>
    65.             <li>
    66.                 <div class="liwrap">
    67.                     <div class="lileft">
    68.                         <div class="date">
    69.                             <span class="year">2014</span>
    70.                             <span class="md">0425</span>
    71.                         </div>
    72.                     </div>
    73.                     
    74.                     <div class="point"><b></b></div>
    75.                     
    76.                     <div class="liright">
    77.                         <div class="histt"><a href="https://b5.mxunkeji.com">官方微博</a></div>
    78.                         <div class="hisct">推出了HTML5 CSS3 官方微博</div>
    79.                     </div>
    80.                 </div>
    81.             </li>
    82.             <li>
    83.                 <div class="liwrap">
    84.                 
    85.                     <div class="lileft">
    86.                         <div class="date">
    87.                             <span class="year">2014</span>
    88.                             <span class="md">0424</span>
    89.                         </div>
    90.                     </div>
    91.                     
    92.                     <div class="point"><b></b></div>
    93.                     <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
    94.                     <div class="liright">
    95.                         <div class="histt"><a href="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 上线</a></div>
    96.                         <div class="hisct">虽然功能还未健全,但是我们已迫不及待的让它去接受广大用户的火眼金睛</div>
    97.                     </div>
    98.                 </div>
    99.             </li>
    100.             <li>
    101.                 <div class="liwrap">
    102.                     <div class="lileft">
    103.                         <div class="date">
    104.                             <span class="year">2013</span>
    105.                             <span class="md">0508</span>
    106.                         </div>
    107.                     </div>
    108.                     
    109.                     <div class="point"><b></b></div>
    110.                     
    111.                     <div class="liright">
    112.                         <div class="histt"><a href="https://b5.mxunkeji.com">初期讨论</a></div>
    113.                         <div class="hisct">在集体探讨下,发现目前的HTML5 CSS3 发展历程已经不能满足需求,集体讨论=,这时候,韩老师之前的设计稿被端上了会议桌。</div>
    114.                     </div>
    115.                 </div>
    116.             </li>
    117.             <li>
    118.                 <div class="liwrap">
    119.                     <div class="lileft">
    120.                         <div class="date">
    121.                             <span class="year">2012</span>
    122.                             <span class="md">0701</span>
    123.                         </div>
    124.                     </div>
    125.                     <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
    126.                     <div class="point"><b></b></div>
    127.                     
    128.                     <div class="liright">
    129.                         <div class="histt"><a href="#">灵感迸发</a></div>
    130.                         <div class="hisct">某天晚上的凌晨三点一刻,预想建立这样一个功能的网站,专为网页设计师。</div>
    131.                     </div>
    132.                 </div>
    133.             </li>
    134.             <li>
    135.                 <div class="liwrap">
    136.                 
    137.                     <div class="lileft">
    138.                         <div class="date">
    139.                             <span class="year">2012</span>
    140.                             <span class="md">0524</span>
    141.                         </div>
    142.                     </div>
    143.                     
    144.                     <div class="point"><b></b></div>
    145.                     
    146.                     <div class="liright">
    147.                         <div class="histt"><a href="https://b5.mxunkeji.com">HTML5 CSS3 发展历程 上线</a></div>
    148.                         <div class="hisct">虽然功能还未健全,但是我们已迫不及待的让它去接受广大用户的火眼金睛</div>
    149.                     </div>
    150.                 </div>
    151.             </li>
    152.             <li>
    153.                 <div class="liwrap">
    154.                     <div class="lileft">
    155.                         <div class="date">
    156.                             <span class="year">2012</span>
    157.                             <span class="md">3月1日</span>
    158.                         </div>
    159.                     </div>
    160.                     
    161.                     <div class="point"><b></b></div>
    162.                     
    163.                     <div class="liright">
    164.                         <div class="histt"><a href="https://b5.mxunkeji.com">初见成效</a></div>
    165.                         <div class="hisct">代码笔记第一版上线</div>
    166.                     </div>
    167.                 </div>
    168.             </li>
    169.         </ul>
    170.     </div>
    171. </div>
    172. <!--www.bcty365.com,B5教程网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在B5教程网-->
    173.  

    下载资源:184 下载积分:0
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-87-156-1.html
    相关热词搜索: jquery插件库 网站发展 时间轴