jQuery時間軸進度圖片和文字描述播放
編輯：網頁特效代碼
查看效果：
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/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>
小編推薦
熱門推薦