合作(zuò)
咨詢
建站(zhàn)咨詢
- 作(zuò)者：admin
- 發表時(shí)間(jiān)：2013-07-02 14:16:54
- 來(lái)源：未知
這是一款可(kě)用于展示曆史和(hé)計(jì)劃的時(shí)間(jiān)軸插件，尤其比較适合一些(xiē)網站(zhàn)展示發展曆程、大(dà)事件等場(chǎng)景。該插件基于jQuery，可(kě)以滑動切換、水(shuǐ)平和(hé)垂直滾動、支持鍵盤方向鍵。經過擴展後可(kě)以支持鼠标滾輪事件。
HTML
我們在body中建立一個(gè)div#timeline作(zuò)為(wèi)展示區(qū)，#dates為(wèi)時(shí)間(jiān)軸，示例中我們用年份作(zuò)為(wèi)主軸，#issues作(zuò)為(wèi)內(nèi)容展示區(qū)，即展示對應主軸點年份的內(nèi)容，注意id對應上(shàng)。
jQuery Timelinr依賴于jQuery，所以在html中要先載入jQuery庫和(hé)jQuery Timelinr插件。
CSS
接下來(lái)用CSS來(lái)布局，你(nǐ)可(kě)以設置不同的CSS來(lái)控制(zhì)時(shí)間(jiān)軸是否橫向排列還(hái)是縱向排列，根據需求自由發揮，以下給出的是縱向排列，即用于垂直滾動的樣式。
#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
調用時(shí)間(jiān)軸插件非常簡單，執行(xíng)以下代碼：
$(function(){
$().timelinr({
orientation:'vertical'
});
});
jQuery Timelinr提供了很(hěn)多(duō)可(kě)設置的選項，可(kě)以根據需要進行(xíng)設置。
| 選項 | 描述 | 默認值 |
| orientation | 時(shí)間(jiān)軸方向，可(kě)為(wèi)水(shuǐ)平(horizontal)或垂直(vertical) | horizontal |
| containerDiv | 時(shí)間(jiān)軸展示主區(qū)域ID | #timeline |
| datesDiv | 時(shí)間(jiān)軸主軸ID | #dates |
| datesSelectedClass | 當前主軸軸點的樣式 | selected |
| datesSpeed | 主軸滾動速度，可(kě)為(wèi)100～1000之間(jiān)的數(shù)字，或者設置為(wèi)'slow', 'normal' or 'fast' | normal |
| issuesDiv | 主要內(nèi)容展示區(qū) | #issues |
| issuesSpeed | 對應內(nèi)容區(qū)的滾動速度，可(kě)為(wèi)100～1000之間(jiān)的數(shù)字，或者設置為(wèi)'slow', 'normal' or 'fast' | fast |
| issuesTransparency | 內(nèi)容區(qū)的切入時(shí)的透明(míng)度，在0～1之間(jiān)取值 | 0.2 |
| issuesTransparencySpeed | 內(nèi)容區(qū)的切入時(shí)的透明(míng)度變化速度，100～1000之間(jiān)的數(shù)字 | 500 |
| prevButton | 用于點擊展示前一項內(nèi)容的按鈕ID | #prev |
| nextButton | 用于點擊展示後一項內(nèi)容的按鈕ID | #next |
| arrowKeys | 是否支持方向鍵，true or false | false |
| startAt | 初始化起點，即初始化軸點位置，數(shù)字 | 1 |
| autoPlay | 是否自動滾動，true or false | false |
| autoPlayDirection | 滾動方向，forward or backward | forward |
| autoPlayPause | 自動滾動時(shí)停留時(shí)間(jiān)，毫秒(miǎo) | 2000 |
支持滾輪驅動
此外，當前的jQuery Timelinr并不支持鼠标滾輪驅動，其實我們可(kě)以稍微對插件做(zuò)下擴展就可(kě)以支持鼠标滾輪驅動，這裏需要用到滾輪時(shí)間(jiān)插件：jquery.mousewheel.js
下載該插件後，在頁面中導入。
然後，修改jquery.timelinr-0.9.53.js，大(dà)概在260行(xíng)位置加入如下代碼：
//--------------Added by helloweba.com 20130326----------
if(settings.mousewheel=="true") { //支持滾輪
$(settings.containerDiv).mousewheel(function(event, delta, deltaX, deltaY){
if(delta==1){
$(settings.prevButton).click();
}else{
$(settings.nextButton).click();
}
});
}
我們在示例中屏蔽了按鈕prevButton和(hé)nextButton，當設置了支持滾輪事件時(shí)，滾輪向上(shàng)，相當于點擊prevButton，滾輪向下，相當于點擊了nextButton。
然後在32行(xíng)處加入初始化選項：
mousewheel: 'false'
最後使用以下代碼後，整個(gè)時(shí)間(jiān)軸就可(kě)支持滾輪事件了，查看demo。
$(function(){
$().timelinr({
mousewheel: 'true'
});
});
