jQuery时间轴特效
生活随笔
收集整理的這篇文章主要介紹了
jQuery时间轴特效
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一 timelinr
圖圖：
碼碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery時(shí)間軸幻燈展示特效</title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <script type="text/javascript" src="jquery.js"></script><script src="jquery.timelinr-0.9.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){$().timelinr()});</script> </head> <body id="introduction"> <div id="page"> <div class="demotips"><a href="index.html">演示一</a><a href="demo2.html">演示二</a><a href="demo3.html">演示三</a></div><div id="container" class="content clearfix"><div id="timeline"><ul id="dates"><li><a href="#1900">1900</a></li><li><a href="#1944">1944</a></li><li><a href="#1950">1950</a></li><li><a href="#1971">1971</a></li><li><a href="#1999">1999</a></li><li><a href="#2001">2001</a></li><li><a href="#2011">2011</a></li></ul><ul id="issues"><li id="1900"><img src="images/tu1.jpg" width="256" height="256" /><h1>1900</h1><p>計(jì)算機(jī)誕生 計(jì)算機(jī)誕生 計(jì)算機(jī)誕生 </p></li><li id="1944"><img src="images/tu2.jpg" width="256" height="256" /><h1>1944</h1><p>比爾誕生 比爾誕生 比爾誕生 </p></li><li id="1950"><img src="images/tu3.jpg" width="256" height="256" /><h1>1950</h1><p>蔣幫主誕生 蔣幫主誕生 蔣幫主誕生 </p></li><li id="1971"><img src="images/tu4.jpg" width="256" height="256" /><h1>1971</h1><p>CSDN誕生 CSDN誕生 CSDN誕生 </p></li><li id="1999"><img src="images/tu5.jpg" width="256" height="256" /><h1>1999</h1><p>喬布斯回來(lái)了 喬布斯回來(lái)了 喬布斯回來(lái)了 </p></li><li id="2001"><img src="images/tu6.jpg" width="256" height="256" /><h1>2001</h1><p>火星撞地球 火星撞地球 火星撞地球 </p></li><li id="2011"><img src="images/tu8.jpg" width="256" height="256" /><h1>2011</h1><p>鄙人退隱江湖 金盆洗手</p></li></ul><div id="grad_left"></div><div id="grad_right"></div><a href="#" id="next">+</a><a href="#" id="prev">-</a></div></div> <p align="center"></p><br> <p align="center"></p> </div> </div> </body> </html>代碼說(shuō)明：
首先引入js庫(kù)?jquery.timelinr-0.9.4.js
日期時(shí)間在ul li 列表中定義；
發(fā)展歷史內(nèi)容在另一個(gè)UL LI列表中定義；
兩個(gè)UL列表套在一個(gè)id為timeline的DIV中；
so easy，將內(nèi)容替換為自己要展示的發(fā)展歷史之類的內(nèi)容即可；
可以有橫向，縱向，自動(dòng)播放的時(shí)間軸效果；
下載：
http://pan.baidu.com/s/1mgMSQE0
總結(jié)
以上是生活随笔為你收集整理的jQuery时间轴特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 网页菜单动画例子
- 下一篇： jQuery图片轮播特效