我爱模板网 > 特效插件 > 日期时间 >  网站时间轴文章列表jquery特效,jquery时间轴正文

网站时间轴文章列表jquery特效,jquery时间轴

特效介绍
jquery时间轴
jquery时间轴特效

网站时间轴文章列表jquery特效,支持鼠标滚动,滚动鼠标时,时间和标题会从两侧移动到中间,当前时间和标题会显示成绿色,同时上面的时间会显示对应的年份。鼠标移动到上面的年份,年份能够旋转,使用了css3的transform 属性,适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

使用方法
1、在head引入下面的相关文件:
1<link rel="stylesheet" type="text/css" href="css/history.css">
3<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
4<script type="text/javascript" src="js/jquery.easing.js"></script>
5<script type="text/javascript" src="js/history.js"></script>
2、在html引入下面的代码:
001<div id="arrow">
002    <ul>
003        <li class="arrowup"></li>
004        <li class="arrowdown"></li>
005    </ul>
006</div>
007 
008<div id="history">
009 
010    <div class="title">
011        <h2>网站成长史</h2>
012        <div id="circle">
013            <div class="cmsk"></div>
014            <div class="circlecontent">
015                <div thisyear="2013" class="timeblock">
016                    <span class="numf"></span>
017                    <span class="nums"></span>
018                    <span class="numt"></span>
019                    <span class="numfo"></span>
020                    <div class="clear"></div>
021                </div>
022                <div class="timeyear">YEAR</div>
023            </div>
024            <a href="#" class="clock"></a>
025        </div>
026    </div>
027     
028    <div id="content">
029        <ul class="list">
030            <li style="margin-top:-110px;">
031                <div class="liwrap">
032                    <div class="lileft">
033                        <div class="date">
034                            <span class="year">2013</span>
035                            <span class="md">0905</span>
036                        </div>
037                    </div>
038                     
039                    <div class="point"><b></b></div>
040                     
041                    <div class="liright">
042                        <div class="histt"><a href="#">HTML5 CSS3 发展历程 发布</a></div>
043                        <div class="hisct">修正了上一版本中的错误,欢迎大家测试,如果发现问题请联系我们,谢谢。</div>
044                    </div>
045                </div>
046            </li>
047            <li>
048                <div class="liwrap">
049                    <div class="lileft">
050                        <div class="date">
051                            <span class="year">2013</span>
052                            <span class="md">0807</span>
053                        </div>
054                    </div>
055                     
056                    <div class="point"><b></b></div>
057                     
058                    <div class="liright">
059                        <div class="histt"><a href="#">HTML5 CSS3 发展历程 发布</a></div>
060                        <div class="hisct">随着用户的访问量增大,功能不能满足需求,我们进行了重大更新,对设计和功能都进行大幅度的升级,增加了原创,欣赏版块</div>
061                    </div>
062                </div>
063            </li>
064            <li>
065                <div class="liwrap">
066                    <div class="lileft">
067                        <div class="date">
068                            <span class="year">2013</span>
069                            <span class="md">0528</span>
070                        </div>
071                    </div>
072                     
073                    <div class="point"><b></b></div>
074                     
075                    <div class="liright">
076                        <div class="histt"><a href="#">官方微博</a></div>
077                        <div class="hisct">推出了HTML5 CSS3 官方微博</div>
078                    </div>
079                </div>
080            </li>
081            <li>
082                <div class="liwrap">
083                 
084                    <div class="lileft">
085                        <div class="date">
086                            <span class="year">2013</span>
087                            <span class="md">0524</span>
088                        </div>
089                    </div>
090                     
091                    <div class="point"><b></b></div>
092                     
093                    <div class="liright">
094                        <div class="histt"><a href="#">HTML5 CSS3 发展历程 上线</a></div>
095                        <div class="hisct">虽然功能还未健全,但是我们已迫不及待的让它去接受广大用户的火眼金睛</div>
096                    </div>
097                </div>
098            </li>
099            <li>
100                <div class="liwrap">
101                    <div class="lileft">
102                        <div class="date">
103                            <span class="year">2013</span>
104                            <span class="md">0508</span>
105                        </div>
106                    </div>
107                     
108                    <div class="point"><b></b></div>
109                     
110                    <div class="liright">
111                        <div class="histt"><a href="#">初期讨论</a></div>
112                        <div class="hisct">在集体探讨下,发现目前的HTML5 CSS3 发展历程已经不能满足需求,集体讨论=,这时候,韩老师之前的设计稿被端上了会议桌。</div>
113                    </div>
114                </div>
115            </li>
116            <li>
117                <div class="liwrap">
118                    <div class="lileft">
119                        <div class="date">
120                            <span class="year">2012</span>
121                            <span class="md">0701</span>
122                        </div>
123                    </div>
124                     
125                    <div class="point"><b></b></div>
126                     
127                    <div class="liright">
128                        <div class="histt"><a href="#">灵感迸发</a></div>
129                        <div class="hisct">某天晚上的凌晨三点一刻,预想建立这样一个功能的网站,专为网页设计师。</div>
130                    </div>
131                </div>
132            </li>
133            <li>
134                <div class="liwrap">
135                 
136                    <div class="lileft">
137                        <div class="date">
138                            <span class="year">2012</span>
139                            <span class="md">0524</span>
140                        </div>
141                    </div>
142                     
143                    <div class="point"><b></b></div>
144                     
145                    <div class="liright">
146                        <div class="histt"><a href="#">HTML5 CSS3 发展历程 上线</a></div>
147                        <div class="hisct">虽然功能还未健全,但是我们已迫不及待的让它去接受广大用户的火眼金睛</div>
148                    </div>
149                </div>
150            </li>
151            <li>
152                <div class="liwrap">
153                    <div class="lileft">
154                        <div class="date">
155                            <span class="year">2013</span>
156                            <span class="md">3月1日</span>
157                        </div>
158                    </div>
159                     
160                    <div class="point"><b></b></div>
161                     
162                    <div class="liright">
163                        <div class="histt"><a href="#">初见成效</a></div>
164                        <div class="hisct">我爱模板网上线</div>
165                    </div>
166                </div>
167            </li>
168        </ul>
169    </div>
170</div>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:js仿苹果iwatch计时器 下一篇:Mobiscroll,基于jQuery的手机端日期选择插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢