jquery tools 系列 scrollable（2）
編輯：JQuery特效代碼
scrollable提供的一系列獲取scrollable對象的方法具體使用方式如下：
代碼如下:
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
scrollable.getConf().speed=200;//設置配置對象的speed屬性
//alert(scrollable.getIndex());//獲取當前滾動項的索引
//alert(scrollable.getItems().length);//獲取當前滾動項的數量
//alert(scrollable.getItemWrap().html());//獲取包含滾動項的節點(class=scrollable)，並將所有滾動項顯示出來
//alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數
//alert(scrollable.getPageIndex());//獲取當前所在分頁
//alert(scrollable.getRoot().html());//獲取滾動項的上一級節點（id=thumbs）
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數量
scrollable.next();//如果有下一個滾動項，則跳轉到下一個滾動項
scrollable.prev(3000,function(){return true});//跳轉到前一滾動項
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉到前一頁
//scrollable.nextPage();//跳轉到下一頁
//scrollable.setPage(1);//跳轉到下一頁
//scrollable.begin();//跳轉到第一個滾動項
//scrollable.end();//跳轉到最後一個滾動項
scrollable.click(3);//使第四個滾動項處於選中狀態
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最後一個滾動項
scrollable.reload().prev();//自動更新相關配置信息，並跳轉到被刪除滾動項的前一項
});
以下是scrollable對象的方法說明描述：
方法名稱
返回值
說明
getConf()
Object
返回scrollable的配置對象，並且可通過設置該對象的相關屬性值來修改該配置對象的屬性。
getIndex()
number
獲取當前滾動項的索引號，0代表第一個元素，1代表第二個元素，以此類推。此外，需注意的是，如果獲取到多個滾動項，那麼將會只返回第一個滾動項的索引號。
getItems()
jQuery
返回所有的滾動項，結果以jquery對象的方式返回。
getItemWrap()
jQuery
獲取滾動項的父節點，結果以jquery對象的方式返回。
getPageAmount()
number
獲取當前滾動欄的分頁數。
getPageIndex()
number
返回當前分頁索引號。比如說，如果分頁設置為5個滾動項/頁，並且當前滾動項位置為7的話，那麼將會返回1（第二頁）
getRoot()
jQuery
獲取滾動項的上一級節點。
getSize()
number
返回滾動項的數量。該方法等同於getConf().size
getVisibleItems()
jQuery
獲取一個由當前可見滾動項組成列表，該列表為一個jquery對象，可見滾動項的數量由配置對象的size屬性定義。
reload()
API
scrollable支持動態添加和刪除滾動項的功能。在動態添加或刪除滾動項以後，調用此方法來自動更新分頁導航以及滾動項移動的相關信息。
prev()
API
跳轉到該滾動項的前一項（如果該滾動項不是第一個滾動項）
next()
API
跳轉到該滾動項的下一項（如果該滾動項不是最後一個滾動項）
seekTo(index)
API
跳轉到指定索引處的滾動項。
move(offset)
API
將處於當前狀態（激活）的滾動項位置由當前滾動項向前/後移動offset。Offset為正，則滾動項向右/下移動，否則，向左/上移動。比如:move(2),則處於當前狀態的滾動項的索引由i滾動項轉移至i+2滾動項。
prevPage()
API
跳轉到前一頁（如果該頁不是第一頁）。
nextPage()
API
跳轉到後一頁（如果該頁不是最後一頁）。
setPage(index)
API
跳轉到第index頁。比如，index=2,那麼會從當前頁跳轉到第3頁。
movePage(offset)
API
用於將顯示頁的位置由當前頁切換到該頁/後offset頁，該方法其他解釋類似於(offset)。
begin()
API
跳轉到第一個滾動項，相當於seekTo(0)。
end()
API
跳轉到最後一個滾動項。
click(index)
API
使第index個滾動項處於選中（激活）狀態。
onBeforeSeek(fn)
API
參見配置對象的onBeforeSeek相關說明
onSeek(fn)
API
參見配置對象的onSeek相關說明注意：上面方法表中prev()方法以下的方法除了表中攜帶的參數外，還包含兩個隱含參數：speed和callback。其中speed參數是用於控制滾動項的動畫效果持續時間的，而callback為其回調方法。具體實現可參見scrollable的prev()方法使用示例。
最後，給出本scrollable系列的完整示例代碼：
代碼如下:
<!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" href="http://static.flowplayer.org/tools/css/scrollable-navig.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="/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="/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="/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="/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="/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,//設置是否自動跳轉（根據間隔時間）
//interval: 1000,//設置間歇時間間隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳轉到上一項
//next:'.next'//跳轉到下一項
prevPage:'.prev',//跳轉到上一頁
nextPage:'.next',//跳轉到下一頁
hoverClass: 'hover',
easing:'linear'
});
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
scrollable.getConf().speed=200;//設置配置對象的speed屬性
//alert(scrollable.getIndex());//獲取當前滾動項的索引
//alert(scrollable.getItems().length);//獲取當前滾動項的數量
//alert(scrollable.getItemWrap().html());//獲取包含滾動項的節點(class=scrollable)，並將所有滾動項顯示出來
//alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數
//alert(scrollable.getPageIndex());//獲取當前所在分頁
//alert(scrollable.getRoot().html());//獲取滾動項的上一級節點（id=thumbs）
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數量
scrollable.next();//如果有下一個滾動項，則跳轉到下一個滾動項
scrollable.prev(3000,function(){return true});//跳轉到前一滾動項
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉到前一頁
//scrollable.nextPage();//跳轉到下一頁
//scrollable.setPage(1);//跳轉到下一頁
//scrollable.begin();//跳轉到第一個滾動項
//scrollable.end();//跳轉到最後一個滾動項
scrollable.click(3);//使第四個滾動項處於選中狀態
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最後一個滾動項
scrollable.reload().prev();//自動更新相關配置信息，並跳轉到被刪除滾動項的前一項
});
});
// --></script>
代碼如下:
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
scrollable.getConf().speed=200;//設置配置對象的speed屬性
//alert(scrollable.getIndex());//獲取當前滾動項的索引
//alert(scrollable.getItems().length);//獲取當前滾動項的數量
//alert(scrollable.getItemWrap().html());//獲取包含滾動項的節點(class=scrollable)，並將所有滾動項顯示出來
//alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數
//alert(scrollable.getPageIndex());//獲取當前所在分頁
//alert(scrollable.getRoot().html());//獲取滾動項的上一級節點（id=thumbs）
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數量
scrollable.next();//如果有下一個滾動項，則跳轉到下一個滾動項
scrollable.prev(3000,function(){return true});//跳轉到前一滾動項
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉到前一頁
//scrollable.nextPage();//跳轉到下一頁
//scrollable.setPage(1);//跳轉到下一頁
//scrollable.begin();//跳轉到第一個滾動項
//scrollable.end();//跳轉到最後一個滾動項
scrollable.click(3);//使第四個滾動項處於選中狀態
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最後一個滾動項
scrollable.reload().prev();//自動更新相關配置信息，並跳轉到被刪除滾動項的前一項
});
以下是scrollable對象的方法說明描述：
最後，給出本scrollable系列的完整示例代碼：
代碼如下:
<!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" href="http://static.flowplayer.org/tools/css/scrollable-navig.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="/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="/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="/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="/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="/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,//設置是否自動跳轉（根據間隔時間）
//interval: 1000,//設置間歇時間間隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳轉到上一項
//next:'.next'//跳轉到下一項
prevPage:'.prev',//跳轉到上一頁
nextPage:'.next',//跳轉到下一頁
hoverClass: 'hover',
easing:'linear'
});
var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
scrollable.getConf().speed=200;//設置配置對象的speed屬性
//alert(scrollable.getIndex());//獲取當前滾動項的索引
//alert(scrollable.getItems().length);//獲取當前滾動項的數量
//alert(scrollable.getItemWrap().html());//獲取包含滾動項的節點(class=scrollable)，並將所有滾動項顯示出來
//alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數
//alert(scrollable.getPageIndex());//獲取當前所在分頁
//alert(scrollable.getRoot().html());//獲取滾動項的上一級節點（id=thumbs）
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數量
scrollable.next();//如果有下一個滾動項，則跳轉到下一個滾動項
scrollable.prev(3000,function(){return true});//跳轉到前一滾動項
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳轉到前一頁
//scrollable.nextPage();//跳轉到下一頁
//scrollable.setPage(1);//跳轉到下一頁
//scrollable.begin();//跳轉到第一個滾動項
//scrollable.end();//跳轉到最後一個滾動項
scrollable.click(3);//使第四個滾動項處於選中狀態
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//刪除最後一個滾動項
scrollable.reload().prev();//自動更新相關配置信息，並跳轉到被刪除滾動項的前一項
});
});
// --></script>
小編推薦
熱門推薦