當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery时间轴特效

發布時間：2025/4/14 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery时间轴特效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一 timelinr

圖圖：

碼碼：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery時間軸幻燈展示特效</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>計算機誕生計算機誕生計算機誕生 </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>喬布斯回來了喬布斯回來了喬布斯回來了 </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>

代碼說明：

首先引入js庫?jquery.timelinr-0.9.4.js

日期時間在ul li 列表中定義；

發展歷史內容在另一個UL LI列表中定義；
兩個UL列表套在一個id為timeline的DIV中；
so easy，將內容替換為自己要展示的發展歷史之類的內容即可；
可以有橫向，縱向，自動播放的時間軸效果；
下載：
http://pan.baidu.com/s/1mgMSQE0

總結

以上是生活随笔為你收集整理的jQuery时间轴特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。