jQuery時間軸插件：jQuery Timelinr

 

這是一款可用於展示歷史和計划的時間軸插件，尤其比較適合一些網站展示發展歷程、大事件等場景。該插件基於jQuery，可以滑動切換、水平和垂直滾動、支持鍵盤方向鍵。經過擴展后可以支持鼠標滾輪事件。

 

HTML

我們在body中建立一個div#timeline作為展示區，#dates為時間軸，示例中我們用年份作為主軸，#issues作為內容展示區，即展示對應主軸點年份的內容，注意id對應上。

 <div id="timeline">
        <ul id="dates">
            <li><a href="#1900" class="selected">1900</a></li>
            <li><a href="#1930">1930</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="#1977">1977</a></li>
            <li><a href="#1989">1989</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" class="selected">
                <img src="images/1.png" width="256" height="256" />
                <h1>1900</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="1930">
                <img src="images/2.png" width="256" height="256" />
                <h1>1930</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="1944">
                <img src="images/3.png" width="256" height="256" />
                <h1>1944</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="1950">
                <img src="images/4.png" width="256" height="256" />
                <h1>1950</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="1971">
                <img src="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="1977">
                <img src="images/6.png" width="256" height="256" />
                <h1>1977</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="1989">
                <img src="images/7.png" width="256" height="256" />
                <h1>1989</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="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="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="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_top"></div>
        <div id="grad_bottom"></div>
        <a href="#" id="next">+</a>
        <a href="#" id="prev">-</a>
    </div>

jQuery Timelinr依賴於jQuery，所以在html中要先載入jQuery庫和jQuery Timelinr插件。

<script src="jquery.min.js"></script> 
<script src="jquery.timelinr-0.9.53.js"></script> 

 

CSS

接下來用CSS來布局，你可以設置不同的CSS來控制時間軸是否橫向排列還是縱向排列，根據需求自由發揮，以下給出的是縱向排列，即用於垂直滾動的樣式。

#timeline {width: 760px;height: 440px;overflow: hidden;margin: 40px auto; 
position: relative;background: url('dot.gif') 110px top repeat-y;} 
#dates {width: 115px;height: 440px;overflow: hidden;float: left;} 
#dates li {list-style: none;width: 100px;height: 100px;line-height: 100px;font-size: 24px; 
 padding-right:20px; text-align:right; background: url('biggerdot.png') 108px center no-repeat;} 
#dates a {line-height: 38px;padding-bottom: 10px;} 
#dates .selected {font-size: 38px;} 
#issues {width: 630px;height: 440px;overflow: hidden;float: right;}     
#issues li {width: 630px;height: 440px;list-style: none;} 
#issues li h1 {color: #ffcc00;font-size: 42px; height:52px; line-height:52px; 
 text-shadow: #000 1px 1px 2px;} 
#issues li p {font-size: 14px;margin: 10px;line-height: 26px;} 

 

jQuery

調用時間軸插件非常簡單，執行以下代碼：

$(function(){ 
   $().timelinr({ 
           orientation:'vertical' 
   }); 
}); 

 

 

jQuery Timelinr提供了很多可設置的選項，可以根據需要進行設置。

選項	描述	默認值
orientation	時間軸方向，可為水平(horizontal)或垂直(vertical)	horizontal
containerDiv	時間軸展示主區域ID	#timeline
datesDiv	時間軸主軸ID	#dates
datesSelectedClass	當前主軸軸點的樣式	selected
datesSpeed	主軸滾動速度，可為100～1000之間的數字，或者設置為'slow', 'normal' or 'fast'	normal
issuesDiv	主要內容展示區	#issues
issuesSpeed	對應內容區的滾動速度，可為100～1000之間的數字，或者設置為'slow', 'normal' or 'fast'	fast
issuesTransparency	內容區的切入時的透明度，在0～1之間取值	0.2
issuesTransparencySpeed	內容區的切入時的透明度變化速度，100～1000之間的數字	500
prevButton	用於點擊展示前一項內容的按鈕ID	#prev
nextButton	用於點擊展示后一項內容的按鈕ID	#next
arrowKeys	是否支持方向鍵，true or false	false
startAt	初始化起點，即初始化軸點位置，數字	1
autoPlay	是否自動滾動，true or false	false
autoPlayDirection	滾動方向，forward or backward	forward
autoPlayPause	自動滾動時停留時間，毫秒	2000

 

支持滾輪驅動

此外，當前的jQuery Timelinr並不支持鼠標滾輪驅動，其實我們可以稍微對插件做下擴展就可以支持鼠標滾輪驅動，這里需要用到滾輪時間插件：jquery.mousewheel.js

下載該插件后，在頁面中導入。

<script src="jquery.mousewheel.js"></script> 

 

然后，修改jquery.timelinr-0.9.54.js，大概在260行位置加入如下代碼：

if(settings.mousewheel=="true") { //支持滾輪 
    $(settings.containerDiv).mousewheel(function(event, delta, deltaX, deltaY){ 
        if(delta==1){ 
            $(settings.prevButton).click(); 
        }else{ 
            $(settings.nextButton).click(); 
        } 
    }); 
} 

我們在示例中屏蔽了按鈕prevButton和nextButton，當設置了支持滾輪事件時，滾輪向上，相當於點擊prevButton，滾輪向下，相當於點擊了nextButton。

然后在32行處加入初始化選項：

mousewheel:  'false' 

最后使用以下代碼后，整個時間軸就可支持滾輪事件了，查看demo。

$(function(){ 
    $().timelinr({ 
        mousewheel:    'true' 
    }); 
}); 

 

原文：http://www.helloweba.com/view-blog-211.html