SlipJs快速使用教程

2022-07-08 18:06:16 字數 1760 閱讀 3252

開始之前你可以使用手機訪問slipjs的演示例子:slipjs.com/demo

***:

除了這篇文章還另一篇高階性的文章:

slipjs api詳細

進入正題  如何使用slipjs,很簡單只要兩步:

第二步: 使用函式slip(mode, core, para);

該函式有三個引數:  

第乙個引數:mode ,可以為"px"或者"page"。

為"px"     時將實現慣性滾動的效果(類似slipjs.com/dome中的第乙個例子),

為"page" 時將實現類似輪換的

換屏效果(類似slipjs.com/dome中的第乙個例子)。

例如:

slip("px",  core,  para); 

//或者

slip("page", core, para);

第二個引數:core ,這個引數傳遞的是運動的物件,例如:

var core = document.getelementbyid("core");

slip('px', core, para);

第三個引數:para ,這個引數是乙個物件子面量,該引數在px慣性滾動狀態下和在page換屏狀態下可傳遞的內容存在差別。

首先是這兩種狀態下均可傳遞的引數有:

slip('px', core, );
page換屏狀態下獨有的引數:

slip('page', core, );
px慣性滾動狀態下獨有的引數:

slip('px', core, );
現在你就可以預覽效果了。

更詳細的引數說明

看到這裡如果你存在疑問那我猜可能會集中在幾個引數的用法上,這些引數包括

page換屏狀態下的

lastpagefun: function, //

firstpagefun: function, //

no_follow: true

//是否跟隨手指移動來完成換屏,ture為不跟隨,預設跟隨,更詳細請看下文

px慣性滾動狀態下的

perfect: true,  //

是否啟用完美模式,true為啟用,何為完美模式,更詳細請看下文

接下來我將乙個個詳細講解

lastpagefun: function

//

no_follow: true

//是否跟隨手指移動來完成換屏,ture為不跟隨,預設跟隨。以輪換為例,

你可能發現現在網際網路上的手機**輪換功能基本可以分為兩類,一類是你手指在上面滑動的時候會跟隨你手指移動,

另一類是你手指在上面滑動時沒有反應,只有你手指離開的時候吹滑動到下一張。通過這個引數你可以任選一種適合你的方式。

perfect: true

//是否啟用完美模式,true為啟用,何為完美模式。所謂完美模式是對應流暢模式而言的,

完美模式和流暢模式的區別表現在於滾動條的變化,完美模式下滾動條在滾動到底部或者頂部的時候大小會變化,

而流暢模式則沒這個視覺效果。理論上流暢模式要比完美模式反應效率等各方面更快,其中的區別在表現上是滾

動條的區別,其實是實現形式的不同使得流暢模式的無法實現這一視覺效果。

python快速教程 Python快速教程

怎麼能快速地掌握python?這是和朋友閒聊時談起的問題。python包含的內容很多,加上各種標準庫 拓展庫,亂花漸欲迷人眼。我一直希望寫乙個快速的 容易上手的python教程,而且言語簡潔,循序漸進,讓沒有背景的讀者也可以從基礎開始學習。我將在每一篇中專注於乙個小的概念,希望在閒暇時可以很快讀完。...

python快速教程 Python快速教程

怎麼能快速地掌握python?這是和朋友閒聊時談起的問題。python包含的內容很多,加上各種標準庫 拓展庫,亂花漸欲迷人眼。我一直希望寫乙個快速的 容易上手的python教程,而且言語簡潔,循序漸進,讓沒有背景的讀者也可以從基礎開始學習。我將在每一篇中專注於乙個小的概念,希望在閒暇時可以很快讀完。...

Python教程 Python快速教程

怎麼能快速地掌握python?這是和朋友閒聊時談起的問題。python包含的內容很多,加上各種標準庫 拓展庫,亂花漸欲迷人眼。我一直希望寫乙個快速的 容易上手的python教程,而且言語簡潔,循序漸進,讓沒有背景的讀者也可以從基礎開始學習。我將在每一篇中專注於乙個小的概念,希望在閒暇時可以很快讀完。...