|
|
復(fù)制代碼 代碼如下:
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />
<h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">60 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />
<h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">80 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" />
<h3><em>3. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">100 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" />
<h3><em>4. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">120 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" />
<h3><em>5. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">140 sec</span>
</div>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />
該功能是通過(guò)jqueryObject.scrollable()方法來(lái)實(shí)現(xiàn)的，其中scrollable方法提供以下兩種方式：
1. $("div.scrollable").scrollable//該方法為采用默認(rèn)方法顯示滾動(dòng)欄
2. $("div.scrollable").scrollable({config object}) //該方法通過(guò)配置對(duì)象來(lái)定制滾動(dòng)欄顯示內(nèi)容及方式。
以下代碼為第二種方式的配置參數(shù)實(shí)現(xiàn)（只需將該實(shí)現(xiàn)放于jquery的ready方法中即可）：
復(fù)制代碼 代碼如下:
$("div.scrollable").scrollable({
size: 3,
vertical:false,
//clickable:false,
loop:true,//設(shè)置是否自動(dòng)跳轉(zhuǎn)（根據(jù)間隔時(shí)間）
//interval: 1000,//設(shè)置間歇時(shí)間間隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳轉(zhuǎn)到上一項(xiàng)
//next:'.next'//跳轉(zhuǎn)到下一項(xiàng)
prevPage:'.prev',//跳轉(zhuǎn)到
nextPage:'.next',//跳轉(zhuǎn)到
hoverClass: 'hover',
easing:'linear'
});
下面對(duì)scrollable配置參數(shù)描述如下：
| 屬性 | 默認(rèn)值 | |
| size | 5 | 設(shè)置滾動(dòng)項(xiàng)（圖片或按鈕等）顯示的數(shù)量，但是前提條件是必須要正確設(shè)置滾動(dòng)項(xiàng)的父節(jié)點(diǎn)（jquery tools官方網(wǎng)站和本文示例中該父節(jié)點(diǎn)的class為scrollable）CSS文件中的寬度（width），否則僅僅設(shè)置該處基本沒(méi)效果；此外，如果設(shè)置分頁(yè)的話，此處將會(huì)顯示每頁(yè)滾動(dòng)項(xiàng)的數(shù)量，即觸發(fā)“nextPage”或“prePage”后移動(dòng)的滾動(dòng)項(xiàng)數(shù)量。 |
| vertical | FALSE | 設(shè)置滾動(dòng)項(xiàng)滾動(dòng)的方向，如果為false的話，滾動(dòng)項(xiàng)水平滾動(dòng)，否則為垂直滾動(dòng)；注：對(duì)于垂直滾動(dòng)，不僅需要修改該屬性，還需修改相應(yīng)的css文件。 |
| clickable | TRUE | 當(dāng)滾動(dòng)項(xiàng)被點(diǎn)擊時(shí)，是否觸發(fā)滾動(dòng)操作（即滾動(dòng)項(xiàng)是否滾動(dòng)）。 |
| loop | FALSE | 當(dāng)滾動(dòng)到最后一個(gè)滾動(dòng)項(xiàng)時(shí)，是否重新從第一個(gè)滾動(dòng)項(xiàng)開(kāi)始滾動(dòng)，此項(xiàng)需和interval（interval不為0）屬性共同使用。 |
| interval | 0 | 用于設(shè)置滾動(dòng)項(xiàng)間自動(dòng)切換的間隔時(shí)間（毫秒）。通過(guò)將該屬性設(shè)置為正值，滾動(dòng)項(xiàng)會(huì)在到達(dá)間隔時(shí)間后自動(dòng)切換到下一個(gè)滾動(dòng)項(xiàng)。 |
| speed | 400 | 自動(dòng)滾動(dòng)的速度（毫秒） |
| keyboard | TRUE | 通過(guò)將該屬性設(shè)置為true/false，來(lái)激活/屏蔽鍵盤方向鍵對(duì)滾動(dòng)項(xiàng)的切換操作。如果該屬性設(shè)置為true，那么通過(guò)左/右方向鍵來(lái)切換水平滾動(dòng)的滾動(dòng)項(xiàng)；通過(guò)上/下方向鍵來(lái)切換垂直滾動(dòng)的滾動(dòng)項(xiàng)。 |
| items | ".items" | 包含滾動(dòng)項(xiàng)的HTML元素――通過(guò)jquery選擇器獲??；該（或這些）html元素必須置于滾動(dòng)項(xiàng)的父節(jié)點(diǎn)（HTML元素）內(nèi) |
| prev | ".prev" | 包含向前移動(dòng)滾動(dòng)項(xiàng)（即向前按鈕）的HTML元素――通過(guò)jquery選擇器獲?。辉揾tml元素必須為滾動(dòng)項(xiàng)父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)。但是，如果該選擇器通過(guò)id獲取html元素，那么該html元素可以置于頁(yè)面的任何位置。 |
| next | ".next" | 包含向后移動(dòng)滾動(dòng)項(xiàng)（即向后按鈕）的HTML元素――通過(guò)jquery選擇器獲取；該html元素必須為滾動(dòng)項(xiàng)父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)。但是，如果該選擇器通過(guò)id獲取html元素，那么該html元素可以置于頁(yè)面的任何位置。 |
| prevPage | ".prevPage" | 包含跳轉(zhuǎn)到的HTML元素――通過(guò)jquery選擇器獲??；該html元素必須為滾動(dòng)項(xiàng)父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)。但是，如果該選擇器通過(guò)id獲取html元素，那么該html元素可以置于頁(yè)面的任何位置。 |
| nextPage | ".nextPage" | 包含跳轉(zhuǎn)到的HTML元素――通過(guò)jquery選擇器獲?。辉揾tml元素必須為滾動(dòng)項(xiàng)父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)。但是，如果該選擇器通過(guò)id獲取html元素，那么該html元素可以置于頁(yè)面的任何位置。 |
| navi | ".navi" | 包含分頁(yè)導(dǎo)航器的HTML元素――通過(guò)jquery選擇器獲取；該html元素必須為滾動(dòng)項(xiàng)父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)。但是，如果該選擇器通過(guò)id獲取html元素，那么該html元素可以置于頁(yè)面的任何位置。 |
| naviItem | "a" | 包含于分頁(yè)導(dǎo)航器內(nèi)的HTML元素（分頁(yè)導(dǎo)航項(xiàng)）――通過(guò)jquery選擇器獲?。贿@些元素用于分頁(yè)導(dǎo)航。 |
| activeClass | "active" | 以下兩種情況下對(duì)應(yīng)項(xiàng)的CSS類名稱：a.被點(diǎn)擊的滾動(dòng)項(xiàng)；b.當(dāng)前頁(yè)對(duì)應(yīng)的分頁(yè)導(dǎo)航項(xiàng) |
| disabledClass | "disabled" | 用于將next/nextPage（下一項(xiàng)/）和prev/prevPage（前一項(xiàng)/前一頁(yè)）渲染為不可用的CSS類名稱。例如：當(dāng)前滾動(dòng)項(xiàng)前面沒(méi)有滾動(dòng)項(xiàng)時(shí)，prev元素會(huì)被置為不可用（disabled）狀態(tài)。 |
| hoverClass | 當(dāng)鼠標(biāo)移動(dòng)到某滾動(dòng)項(xiàng)上方時(shí)，該滾動(dòng)項(xiàng)的CSS類名稱即被指為該class。 | |
| easing | "swing" | 用于設(shè)置滾動(dòng)項(xiàng)切換時(shí)的動(dòng)畫(huà)效果，目前jquery tools提供了“swing”和“l(fā)inear”兩種動(dòng)畫(huà)效果，更多的動(dòng)畫(huà)效果參考jquery easing plugin |
| api | FALSE | 該屬性同該系列中juqry tools 之tabs 和 jquery tools 之 tooltip |
| onBeforeSeek | 滾動(dòng)項(xiàng)滾動(dòng)前觸發(fā)該該屬性設(shè)置的函數(shù)。如果該屬性設(shè)置函數(shù)返回false，那么觸發(fā)該函數(shù)的滾動(dòng)項(xiàng)將不會(huì)滾動(dòng)并替代前一個(gè)滾動(dòng)項(xiàng)位置。該函數(shù)將會(huì)返回一個(gè)包含目標(biāo)元素索引號(hào)的數(shù)組。 | |
| onSeek | 滾動(dòng)項(xiàng)滾動(dòng)后觸發(fā)該該屬性設(shè)置的函數(shù)。 |
JavaScript技術(shù)：jquery tools 系列 scrollable學(xué)習(xí)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
