查看效果：http://hovertree.com/texiao/jquery/75/源代碼下載：http://hovertree.com/h/bjaf/8jlpc2wu.htm效果圖如下：代碼如下： 轉自：http://hovertree.com/h/bjaf/sby54kjl.htm 特效彙總： ...
查看效果：
http://hovertree.com/texiao/jquery/75/
源代碼下載：
http://hovertree.com/h/bjaf/8jlpc2wu.htm
效果圖如下：
代碼如下：
<!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="http://hovertree.com/texiao/jquery/75/css/styles.css" /> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.2.min.js"></script> <script src="http://hovertree.com/texiao/jquery/75/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="http://hovertree.com/texiao/jquery/75/images/1.png" width="256" height="256" /> <h1>1900</h1> <p>這是一個時間軸展示幻燈片，支持自動播放，手動切換，可以豎向也可以橫向，可以放圖片和文本。適合網站，企業等歷史的介紹。by 何問起 </p> </li> <li id="1944"> <img src="http://hovertree.com/texiao/jquery/75/images/3.png" width="256" height="256" /> <h1>1944</h1> <p> 受到網店的影響，服裝店的生意逐漸有所下降，老闆找何問起去談，大概是準備跟上網購潮流，讓何問起準備一下，要在網上開網店，要為服裝店建立網站。何問起也沒說自己經驗不足，只說會積極準備。於是抓緊時間查找資料，學習練習。畢竟還是有功底的，過不多久就在本地搭建了一個網站，實現了一些企業網站的基本功能，信息產品發佈、留言版等。也瞭解了在電商網開網店的方方面面。 </p> </li> <li id="1950"> <img src="http://hovertree.com/texiao/jquery/75/images/4.png" width="256" height="256" /> <h1>1950</h1> <p> 何問起準備好後，跟老闆報告分析了具體情況，老闆說人手不足，就從易到難逐步推行把，有什麼需要儘管提。何問起又有得忙活了，但也是樂此不疲。雖然學的是紡織，而不是電腦或者軟體工程等相關專業，但自從接觸編程以後，興趣就一直有增無減，也熟悉了不少網站架設，Web前端，後端程式，資料庫等等的知識，開了網站hovertree.com，有向全棧工程師發展的趨勢。接受了老闆的這個任務後更是開心，整天精力充沛，戰鬥力十足。 </p> </li> <li id="1971"> <img src="http://hovertree.com/texiao/jquery/75/images/5.png" width="256" height="256" /> <h1>1971</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="1999"> <img src="http://hovertree.com/texiao/jquery/75/images/8.png" width="256" height="256" /> <h1>1999</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="2001"> <img src="http://hovertree.com/texiao/jquery/75/images/9.png" width="256" height="256" /> <h1>2001</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="2011"> <img src="http://hovertree.com/texiao/jquery/75/images/10.png" width="256" height="256" /> <h1>2011</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</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">適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br> <p align="center">來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a> <a href="http://hovertree.com/h/bjaf/sby54kjl.htm" target="_blank">原文</a></p> </div> </body> </html>
轉自：http://hovertree.com/h/bjaf/sby54kjl.htm
特效彙總：http://www.cnblogs.com/roucheng/p/texiao.html
