特效介绍

jquery时间轴特效
网站时间轴文章列表jquery特效,支持鼠标滚动,滚动鼠标时,时间和标题会从两侧移动到中间,当前时间和标题会显示成绿色,同时上面的时间会显示对应的年份。鼠标移动到上面的年份,年份能够旋转,使用了css3的transform 属性,适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
使用方法
1、在head引入下面的相关文件:
1 | < link rel = "stylesheet" type = "text/css" href = "css/history.css" > |
2 | < script src = "http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" ></ script > |
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 > |
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 > |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!