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