SlipJs移動Web滑動特效

進入正題如何使用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為啟用，何為完美模式。所謂完美模式是對應流暢模式而言的，

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

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

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

refresh(core_width, width)：

當在滾動物件的大小發生改變時（如：當使用者滾動到底部時你通過ajax載入新內容，這時元素的尺寸會改變）必須呼叫refresh方法。主要用處是讓slipjs及時感知尺寸的變化以便正常工作。

//引數說明:這兩個引數都是可選的。

//core_width: 滑動元素的寬度或者高度，單位為px（橫向滑動時傳遞寬度，縱向滑動時傳遞高度）

//width: 滑動元素的父級元素的寬度或者高度，單位為px（橫向滑動時傳遞寬度，縱向滑動時傳遞高度）

//例如：

var slipjs = slipjs('px',core);

//當元素的尺寸改變時，我們需要將新的尺寸給refresh:

slipjs.refresh(1000,400);

//也可以不傳遞引數，這時slipjs將自己通過獲取元素的實際尺寸。

topage(num, time)：

page換屏狀態下是用topage可以滑動到指定屏數。

//
引數說明：
//num : 要到達的屏數
//time : 設定過程花費的時間,單位ms
//例如 :
var slipjs = slip('page', core, );
//這時我們想要用3秒的時間緩慢地輪換到第3屏就可以這樣：
slipjs.topage(3, 3000);

that.page

可在page換屏狀態的startfun movefun touchendfun endfun 這4個函式中獲取當前所在的頁（屏）數。

function
end() 
slip('page', bar_list_div, );

注釋：關於startfun movefun touchendfun endfun 這4個函式的用法詳見：slipjs快速使用教程

this.xy

當你想在 startfun movefun touchendfun endfun 這4個函式中獲取滑動元素的座標時可直接使用this.xy來獲取，當狀態為橫向滑動時該值是滑動元素的x座標，當狀態為縱向滑動時該值是滑動元素的y座標。

例如：

function
move() 
slip('px', bar_list_div, );

this.wide_high（3.0.1開始支援）

當你想在 startfun movefun touchendfun endfun 這4個函式中獲取滑動元素的寬或者高（橫向滑動的時候是寬，上下滑動時是高）可直接使用this.wide_high來獲取，當狀態為橫向滑動時該值是滑動元素的width，當狀態為縱向滑動時該值是滑動元素的height。例如：

function
move() 
slip('px', bar_list_div, );

this.parent_wide_high（3.0.1開始支援）

當你想在 startfun movefun touchendfun endfun 這4個函式中獲取滑動元素父級元素的寬或者高（橫向滑動的時候是寬，上下滑動時是高）可直接使用this.parent_wide_high來獲取，當狀態為橫向滑動時該值是父級元素的width，當狀態為縱向滑動時該值是父級元素的height。例如：

function move() 
slip('px', bar_list_div, );

backward和forward（3.5.0開始支援）

以輪換為例，現在你想要新增兩個按鈕，乙個按鈕為「上一張」，另乙個為「下一張」，那麼這是你就可以是使用backward和forward了，具體使用方法如下：

var slip_img = slip('page',change_screen_ul,);
document.getelementbyid("backward").onclick = function
()document.getelementbyid("forward").onclick = function
()

SlipJs移動Web滑動特效

swiper滑動及動畫特效

基於jQuery左右滑動切換特效

微信小程式側邊欄滑動特效左右滑動

SlipJs移動Web滑動特效

swiper滑動及動畫特效

基於jQuery左右滑動切換特效

微信小程式側邊欄滑動特效 左右滑動

相關推薦

微信小程式側邊欄滑動特效左右滑動