SlipJs移动Web滑动特效

最新推荐文章于 2021-05-25 15:27:45 发布

sj987520

最新推荐文章于 2021-05-25 15:27:45 发布

阅读量1.6k

点赞数

进入正题如何使用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为启用，何为完美模式。所谓完美模式是对应流畅模式而言的，
完美模式和流畅模式的区别表现在于滚动条的变化，完美模式下滚动条在滚动到底部或者顶部的时候大小会变化，
而流畅模式则没这个视觉效果。理论上流畅模式要比完美模式反应效率等各方面更快，其中的区别在表现上是滚
动条的区别，其实是实现形式的不同使得流畅模式的无法实现这一视觉效果。    

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, {
    num: 3
});

// 这时我们想要用3秒的时间缓慢地轮换到第3屏就可以这样：
slipjs.toPage(3, 3000); 
   
   
    
    

   
   
  
  
that.page
可在page换屏状态的startFun  moveFun  touchEndFun  endFun 这4个函数中获取当前所在的页（屏）数。
  
  
   
   
    
    
   
   
   
   function end() {
    alert(this.page);// 在滑动结束后输出当前的页(屏)数
}
slip('page', bar_list_div, {
    num: 3,
    endFun: end
});
   
   
    
    

   
   
  
  
提示：该api在图片轮换中导航小点的变化需要用到该api。
注释：关于startFun  moveFun  touchEndFun  endFun 这4个函数的用法详见：SlipJs快速使用教程
this.xy
当你想在 startFun  moveFun  touchEndFun  endFun 这4个函数中获取滑动元素的坐标时可直接使用 this.xy 来获取，当状态为横向滑动时该值是滑动元素的x坐标，当状态为纵向滑动时该值是滑动元素的y坐标。
例如：
  
  
   
   function move() {
    console.log(this.xy);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});
  
  
提示：该api在“下拉刷新”的例子中使用到，在加载数据时非常有用。
this.wide_high（3.0.1开始支持）
当你想在 startFun  moveFun  touchEndFun  endFun 这4个函数中获取滑动元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.wide_high来获取，当状态为横向滑动时该值是滑动元素的width，当状态为纵向滑动时该值是滑动元素的height。例如：
  
  
   
   function move() {
    console.log(this.wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});
  
  
this.parent_wide_high（3.0.1开始支持）
当你想在 startFun  moveFun  touchEndFun  endFun 这4个函数中获取滑动元素父级元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.parent_wide_high来获取，当状态为横向滑动时该值是父级元素的width，当状态为纵向滑动时该值是父级元素的height。例如：
  
  
   
   function move() {
    console.log(this.parent_wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});
  
  
backward和forward（3.5.0开始支持）
以图片轮换为例，现在你想要添加两个按钮，一个按钮为“上一张”，另一个为“下一张”，那么这是你就可以是使用backward和forward了，具体使用方法如下：
  
  
   
   
    
    

   
   
   
   var slip_img = slip('page',change_screen_ul,{
        change_time: 5000,
                      num: 3
});
document.getElementById("backward").onclick = function(){
    slip_img.backward(); // 上一张
}
document.getElementById("forward").onclick = function(){
    slip_img.forward(); // 下一张
}