溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在jQuery中使用scrollable.js滾動插件

發(fā)布時間:2021-04-02 17:15:02 來源:億速云 閱讀:191 作者:Leah 欄目:web開發(fā)

今天就跟大家聊聊有關如何在jQuery中使用scrollable.js滾動插件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。

以下scrollable.js方法說明描述:

方法名稱

返回值說明
getConf()Object返回scrollable的配置對象,并且可通過設置該對象的相關屬性值來修改該配置對象的屬性。
getIndex()number獲取當前滾動項的索引號,0代表第一個元素,1代表第二個元素,以此類推。此外,需注意的是,如果獲取到多個滾動項,那么將會只返回第一個滾動項的索引號。
getItems()jQuery返回所有的滾動項,結果以jquery對象的方式返回。
getItemWrap()jQuery獲取滾動項的父節(jié)點,結果以jquery對象的方式返回。
getPageAmount()number獲取當前滾動欄的分頁數(shù)。
getPageIndex()number返回當前分頁索引號。比如說,如果分頁設置為5個滾動項/頁,并且當前滾動項位置為7的話,那么將會返回1(第二頁)
getRoot()jQuery獲取滾動項的上一級節(jié)點。
getSize()number返回滾動項的數(shù)量。該方法等同于getConf().size
getVisibleItems()jQuery獲取一個由當前可見滾動項組成列表,該列表為一個jquery對象,可見滾動項的數(shù)量由配置對象的size屬性定義。
   
reload()APIscrollable支持動態(tài)添加和刪除滾動項的功能。在動態(tài)添加或刪除滾動項以后,調(diào)用此方法來自動更新分頁導航以及滾動項移動的相關信息。
prev()API跳轉到該滾動項的前一項(如果該滾動項不是第一個滾動項)
next()API跳轉到該滾動項的下一項(如果該滾動項不是最后一個滾動項)
seekTo(index)API跳轉到指定索引處的滾動項。
move(offset)API將處于當前狀態(tài)(激活)的滾動項位置由當前滾動項向前/后移動offset。Offset為正,則滾動項向右/下移動,否則,向左/上移動。比如:move(2),則處于當前狀態(tài)的滾動項的索引由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個滾動項處于選中(激活)狀態(tài)。
   
onBeforeSeek(fn)API參見配置對象的onBeforeSeek相關說明
onSeek(fn)API參見配置對象的onSeek相關說明

注意:上面方法表中prev()方法以下的方法除了表中攜帶的參數(shù)外,還包含兩個隱含參數(shù):speed和callback。其中speed參數(shù)是用于控制滾動項的動畫效果持續(xù)時間的,而callback為其回調(diào)方法。具體實現(xiàn)可參見scrollable的prev()方法使用示例。

具體使用方法:

var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//獲取配置對象中的prev屬性
scrollable.getConf().speed=200;//設置配置對象的speed屬性
//alert(scrollable.getIndex());//獲取當前滾動項的索引
//alert(scrollable.getItems().length);//獲取當前滾動項的數(shù)量
//alert(scrollable.getItemWrap().html());//獲取包含滾動項的節(jié)點(class=scrollable),并將所有滾動項顯示出來
//alert(scrollable.getPageAmount());//獲取當前滾動欄分頁數(shù)
//alert(scrollable.getPageIndex());//獲取當前所在分頁
//alert(scrollable.getRoot().html());//獲取滾動項的上一級節(jié)點(id=thumbs)
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//獲取當前可見滾動項數(shù)量
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);//使第四個滾動項處于選中狀態(tài)
scrollable.onBeforeSeek(function(){
    alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
    scrollable.getItems().filter(":last").remove();//刪除最后一個滾動項
    scrollable.reload().prev();//自動更新相關配置信息,并跳轉到被刪除滾動項的前一項
});

另外,如果你的表單頁面要自適應屏幕并且resize的話能讓表單頁面不至于偏離,可以使用 scrollable.seekTo(index)來解決。

看完上述內(nèi)容,你們對如何在jQuery中使用scrollable.js滾動插件有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI