SlipJs快速使用教程

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

二維碼：

下載SlipJs請訪問SlipJs官方網站：www.slipjs.com

除了這篇文章還另一篇進階性的文章：SlipJs API詳細

進入正題  如何使用SlipJs，很簡單只要兩步：

提示：具體如何使用SlipJs實現演示例子slipjs.com/demo中的效果，請下載並參考演示例子的源碼，下載地址：www.slipjs.com

第一步： 載入slip.js，你只需下載並在你的頁面中載入slip.js；

第二步： 使用函數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, { startFun: function,   // 觸摸開始時執行的函數
         moveFun: function,   // 觸摸過程中執行的函數
     touchEndFun: function,   // 觸摸結束時執行的函數
          endFun: function    // 滑動結束時執行的函數
});

page換屏狀態下獨有的參數：

 

slip('page', core, {
              num: 3,        // 屏數，例如輪換圖片是圖片的張數（必需）
      change_time: 3000,     // 圖片自動輪換的時間
      lastPageFun: function, // 用戶在滑動到最后一屏后仍然滑動下一屏時執行的函數（可用於圖片瀏覽時使用）,更詳細請看下文
     firstPageFun: function, // 用戶在滑動到第一屏后仍然滑動上一屏時執行的函數（可用於圖片瀏覽時使用），更詳細請看下文
        no_follow: true      // 是否跟隨手指移動來完成換屏，ture為不跟隨，默認跟隨，更詳細請看下文
             loop: true      // slipjs3.5.0開始支持，可以實現無限滑動下一張（最后一張時繼續滑可以回到第一張）
});

 

 

 

px慣性滾動狀態下獨有的參數：

slip('px', core, {
       direction: 'x',   // 設置滑動方向,"x"為橫向滑動，默認為縱向滑動。
         perfect: true,  // 是否啟用完美模式，true為啟用，何為完美模式，更詳細請看下文
          no_bar: true,  // 是否啟用模仿滾動條，true為不啟用，默認啟用
     bar_no_hide: true,  // 是否在滾動停止時隱藏滾動條，true為不隱藏，默認隱藏
      core_width: 1000,  // 滑動元素的寬度或者高度，單位為px（橫向滑動時傳遞寬度，縱向滑動時傳遞高度），更詳細請看下文
           width: 400,   // 滑動元素的父級元素的寬度或者高度，單位為px（橫向滑動時傳遞寬度，縱向滑動時傳遞高度），更詳細請看下文
         bar_css: "background-color: rgba(8, 97, 149, 0.5);"  // 自定義滾動條的樣式
});

現在你就可以預覽效果了。

更詳細的參數說明

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

page換屏狀態下的

 lastPageFun: function, // 用戶在滑動到最后一屏后仍然滑動下一屏時執行的函數（可用於圖片瀏覽時使用）,更詳細請看下文
firstPageFun: function, // 用戶在滑動到第一屏后仍然滑動上一屏時執行的函數（可用於圖片瀏覽時使用），更詳細請看下文
   no_follow: true      // 是否跟隨手指移動來完成換屏，ture為不跟隨，默認跟隨，更詳細請看下文

px慣性滾動狀態下的

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

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

lastPageFun: function // 用戶在滑動到最后一屏后仍然滑動下一屏時執行的函數。
//你想象一下：你現在是用px換屏模式來做一個圖片放大並可滑動查看下一張的功能，這時你的用戶滑動到了
最后一張還想繼續查看下一張，你想提醒用戶已經到最后一張了，那么這些提示的代碼就可以放在這個函數中。

no_follow: true      // 是否跟隨手指移動來完成換屏，ture為不跟隨，默認跟隨。以圖片輪換為例，
你可能發現現在互聯網上的手機網站圖片輪換功能基本可以分為兩類，一類是你手指在上面滑動的時候圖片會跟隨你手指移動，
另一類是你手指在上面滑動時沒有反應，只有你手指離開的時候吹滑動到下一張。通過這個參數你可以任選一種適合你的方式。

perfect: true  // 是否啟用完美模式，true為啟用，何為完美模式。所謂完美模式是對應流暢模式而言的，
完美模式和流暢模式的區別表現在於滾動條的變化，完美模式下滾動條在滾動到底部或者頂部的時候大小會變化，
而流暢模式則沒這個視覺效果。理論上流暢模式要比完美模式反應效率等各方面更快，其中的區別在表現上是滾
動條的區別，其實是實現形式的不同使得流暢模式的無法實現這一視覺效果。

 

更多關於SlipJs 的想法，歡迎同時感謝把你的建議寫成郵件給送我，[e-mail]