jQuery时间轴特效

来源：互联网发布：javascript语法大全编辑：程序博客网时间：2024/05/19 14:38

一 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

0 0