|
|
復(fù)制代碼 代碼如下:
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對(duì)象中的prev屬性
scrollable.getConf().speed=200;//設(shè)置配置對(duì)象的speed屬性
//alert(scrollable.getIndex());//獲取當(dāng)前滾動(dòng)項(xiàng)的索引
//alert(scrollable.getItems().length);//獲取當(dāng)前滾動(dòng)項(xiàng)的數(shù)量
//alert(scrollable.getItemWrap().html());//獲取包含滾動(dòng)項(xiàng)的節(jié)點(diǎn)(class=scrollable)，并將所有滾動(dòng)項(xiàng)顯示出來
//alert(scrollable.getPageAmount());//獲取當(dāng)前滾動(dòng)欄分頁(yè)數(shù)
//alert(scrollable.getPageIndex());//獲取當(dāng)前所在分頁(yè)
//alert(scrollable.getRoot().html());//獲取滾動(dòng)項(xiàng)的上一級(jí)節(jié)點(diǎn)（id=thumbs）
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當(dāng)前可見滾動(dòng)項(xiàng)數(shù)量
scrollable.next();//如果有下一個(gè)滾動(dòng)項(xiàng)，則跳轉(zhuǎn)到下一個(gè)滾動(dòng)項(xiàng)
scrollable.prev(3000,function(){return true});//跳轉(zhuǎn)到前一滾動(dòng)項(xiàng)
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉(zhuǎn)到前一頁(yè)
//scrollable.nextPage();//跳轉(zhuǎn)到
//scrollable.setPage(1);//跳轉(zhuǎn)到
//scrollable.begin();//跳轉(zhuǎn)到第一個(gè)滾動(dòng)項(xiàng)
//scrollable.end();//跳轉(zhuǎn)到最后一個(gè)滾動(dòng)項(xiàng)
scrollable.click(3);//使第四個(gè)滾動(dòng)項(xiàng)處于選中狀態(tài)
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最后一個(gè)滾動(dòng)項(xiàng)
scrollable.reload().prev();//自動(dòng)更新相關(guān)配置信息，并跳轉(zhuǎn)到被刪除滾動(dòng)項(xiàng)的前一項(xiàng)
});
以下是scrollable對(duì)象的方法說明描述：
| 方法名稱 | 返回值 | 說明 |
| getConf() | Object | 返回scrollable的配置對(duì)象，并且可通過設(shè)置該對(duì)象的相關(guān)屬性值來修改該配置對(duì)象的屬性。 |
| getIndex() | number | 獲取當(dāng)前滾動(dòng)項(xiàng)的索引號(hào)，0代表第一個(gè)元素，1代表第二個(gè)元素，以此類推。此外，需注意的是，如果獲取到多個(gè)滾動(dòng)項(xiàng)，那么將會(huì)只返回第一個(gè)滾動(dòng)項(xiàng)的索引號(hào)。 |
| getItems() | jQuery | 返回所有的滾動(dòng)項(xiàng)，結(jié)果以jquery對(duì)象的方式返回。 |
| getItemWrap() | jQuery | 獲取滾動(dòng)項(xiàng)的父節(jié)點(diǎn)，結(jié)果以jquery對(duì)象的方式返回。 |
| getPageAmount() | number | 獲取當(dāng)前滾動(dòng)欄的分頁(yè)數(shù)。 |
| getPageIndex() | number | 返回當(dāng)前分頁(yè)索引號(hào)。比如說，如果分頁(yè)設(shè)置為5個(gè)滾動(dòng)項(xiàng)/頁(yè)，并且當(dāng)前滾動(dòng)項(xiàng)位置為7的話，那么將會(huì)返回1（第二頁(yè)） |
| getRoot() | jQuery | 獲取滾動(dòng)項(xiàng)的上一級(jí)節(jié)點(diǎn)。 |
| getSize() | number | 返回滾動(dòng)項(xiàng)的數(shù)量。該方法等同于getConf().size |
| getVisibleItems() | jQuery | 獲取一個(gè)由當(dāng)前可見滾動(dòng)項(xiàng)組成列表，該列表為一個(gè)jquery對(duì)象，可見滾動(dòng)項(xiàng)的數(shù)量由配置對(duì)象的size屬性定義。 |
| reload() | API | scrollable支持動(dòng)態(tài)添加和刪除滾動(dòng)項(xiàng)的功能。在動(dòng)態(tài)添加或刪除滾動(dòng)項(xiàng)以后，調(diào)用此方法來自動(dòng)更新分頁(yè)導(dǎo)航以及滾動(dòng)項(xiàng)移動(dòng)的相關(guān)信息。 |
| prev() | API | 跳轉(zhuǎn)到該滾動(dòng)項(xiàng)的前一項(xiàng)（如果該滾動(dòng)項(xiàng)不是第一個(gè)滾動(dòng)項(xiàng)） |
| next() | API | 跳轉(zhuǎn)到該滾動(dòng)項(xiàng)的下一項(xiàng)（如果該滾動(dòng)項(xiàng)不是最后一個(gè)滾動(dòng)項(xiàng)） |
| seekTo(index) | API | 跳轉(zhuǎn)到指定索引處的滾動(dòng)項(xiàng)。 |
| move(offset) | API | 將處于當(dāng)前狀態(tài)（激活）的滾動(dòng)項(xiàng)位置由當(dāng)前滾動(dòng)項(xiàng)向前/后移動(dòng)offset。Offset為正，則滾動(dòng)項(xiàng)向右/下移動(dòng)，否則，向左/上移動(dòng)。比如:move(2),則處于當(dāng)前狀態(tài)的滾動(dòng)項(xiàng)的索引由i滾動(dòng)項(xiàng)轉(zhuǎn)移至i+2滾動(dòng)項(xiàng)。 |
| prevPage() | API | 跳轉(zhuǎn)到前一頁(yè)（如果該頁(yè)不是第一頁(yè)）。 |
| nextPage() | API | 跳轉(zhuǎn)到后一頁(yè)（如果該頁(yè)不是最后一頁(yè)）。 |
| setPage(index) | API | 跳轉(zhuǎn)到第index頁(yè)。比如，index=2,那么會(huì)從當(dāng)前頁(yè)跳轉(zhuǎn)到第3頁(yè)。 |
| movePage(offset) | API | 用于將顯示頁(yè)的位置由當(dāng)前頁(yè)切換到該頁(yè)/后offset頁(yè)，該方法其他解釋類似于(offset)。 |
| begin() | API | 跳轉(zhuǎn)到第一個(gè)滾動(dòng)項(xiàng)，相當(dāng)于seekTo(0)。 |
| end() | API | 跳轉(zhuǎn)到最后一個(gè)滾動(dòng)項(xiàng)。 |
| click(index) | API | 使第index個(gè)滾動(dòng)項(xiàng)處于選中（激活）狀態(tài)。 |
| onBeforeSeek(fn) | API | 參見配置對(duì)象的onBeforeSeek相關(guān)說明 |
| onSeek(fn) | API | 參見配置對(duì)象的onSeek相關(guān)說明 |
最后，給出本scrollable系列的完整示例代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js" ></script>
<link rel="stylesheet" type="text/css" />
<style><!--
div.scrollable {
position:relative;
overflow:hidden;
width: 646px;
height:300px;
}
#thumbs {
position:absolute;
width:20000em;
clear:both;
border:1px solid #222;
}
a.prev, a.next {
margin-top:118px;
}
#thumbs div {
float:left;
width:214px;
height:300px;
background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px;
color:#fff;
border-left:1px solid #333;
cursor:pointer;
}
#thumbs div.hover {
background-color:#444;
}
#thumbs div.active {
background-color:#066;
cursor:default;
}
#thumbs h3, #thumbs p, #thumbs span {
margin:13px;
font-family:"bitstream vera sans";
font-size:13px;
color:#fff;
}
#thumbs h3 em {
font-style:normal;
color:yellow;
}
--></style><style>div.scrollable {
position:relative;
overflow:hidden;
width: 646px;
height:300px;
}
#thumbs {
position:absolute;
width:20000em;
clear:both;
border:1px solid #222;
}
a.prev, a.next {
margin-top:118px;
}
#thumbs div {
float:left;
width:214px;
height:300px;
background:#333 url(/upload/20090906120115441.png) repeat-x 0 146px;
color:#fff;
border-left:1px solid #333;
cursor:pointer;
}
#thumbs div.hover {
background-color:#444;
}
#thumbs div.active {
background-color:#066;
cursor:default;
}
#thumbs h3, #thumbs p, #thumbs span {
margin:13px;
font-family:"bitstream vera sans";
font-size:13px;
color:#fff;
}
#thumbs h3 em {
font-style:normal;
color:yellow;
}</style>
<!-- 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://files.jb51.NET/upload/20090906120116994.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://files.jb51.NET/upload/20090906120117587.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://files.jb51.NET/upload/20090906120117884.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://files.jb51.NET/upload/20090906120117490.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://files.jb51.NET/upload/20090906120118968.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" />
<div>
<input type="button" value="remove" id="remove"/>
</div>
<script type="text/Javascript"><!--
$(function() {
$("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'
});
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對(duì)象中的prev屬性
scrollable.getConf().speed=200;//設(shè)置配置對(duì)象的speed屬性
//alert(scrollable.getIndex());//獲取當(dāng)前滾動(dòng)項(xiàng)的索引
//alert(scrollable.getItems().length);//獲取當(dāng)前滾動(dòng)項(xiàng)的數(shù)量
//alert(scrollable.getItemWrap().html());//獲取包含滾動(dòng)項(xiàng)的節(jié)點(diǎn)(class=scrollable)，并將所有滾動(dòng)項(xiàng)顯示出來
//alert(scrollable.getPageAmount());//獲取當(dāng)前滾動(dòng)欄分頁(yè)數(shù)
//alert(scrollable.getPageIndex());//獲取當(dāng)前所在分頁(yè)
//alert(scrollable.getRoot().html());//獲取滾動(dòng)項(xiàng)的上一級(jí)節(jié)點(diǎn)（id=thumbs）
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當(dāng)前可見滾動(dòng)項(xiàng)數(shù)量
scrollable.next();//如果有下一個(gè)滾動(dòng)項(xiàng)，則跳轉(zhuǎn)到下一個(gè)滾動(dòng)項(xiàng)
scrollable.prev(3000,function(){return true});//跳轉(zhuǎn)到前一滾動(dòng)項(xiàng)
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉(zhuǎn)到前一頁(yè)
//scrollable.nextPage();//跳轉(zhuǎn)到
//scrollable.setPage(1);//跳轉(zhuǎn)到
//scrollable.begin();//跳轉(zhuǎn)到第一個(gè)滾動(dòng)項(xiàng)
//scrollable.end();//跳轉(zhuǎn)到最后一個(gè)滾動(dòng)項(xiàng)
scrollable.click(3);//使第四個(gè)滾動(dòng)項(xiàng)處于選中狀態(tài)
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最后一個(gè)滾動(dòng)項(xiàng)
scrollable.reload().prev();//自動(dòng)更新相關(guān)配置信息，并跳轉(zhuǎn)到被刪除滾動(dòng)項(xiàng)的前一項(xiàng)
});
});
// --></script>
JavaScript技術(shù)：jquery tools 系列 scrollable（2），轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
