Slip.js

文档

使用

window下暴露了名为 Slip 的全局函数。

Slip

参数：

• el: 原生的dom元素
• direction: String, 元素可滑动的方向，"x", "y", "xy"

var slip = Slip(el, "x");

方法

setCoord

设置元素坐标位置

参数

• coord: Object, 元素坐标位置

slip.setCoord({
  x: 10,
  y: 0
});

destroy

销毁元素的滑动

参数

无

slip.destroy();

事件

start

参数

• fn: Funciton 触碰开始的回调

move

参数

• fn: Function 触碰进行中的回调

end

参数

• fn: Function 触碰结束的回调

属性

coord

Object 元素的坐标值

• coord.x: x坐标值
• coord.y: y坐标值

finger

Object 手指的偏移

• finger.x: x偏移值
• finger.y: y偏移值

orient

Array 手指滑动的方向，这个值会在手指滑动过程中变化

注意：orient的值是数组

• 左滑: ['left']
• 右滑: ['right']
• 上滑: ['up']
• 下滑: ['down']
• 左上滑: ['left', 'up']
• 右上滑: ['right', 'up']
• 右下滑: ['right', 'down']
• 左下滑: ['left', 'down']

轮播器

方法

slider

设置轮播器

Slip(ele, "x").slider();

jump

跳转到指定页（页数从0开始）

Slip(ele, "x").jump(2);

参数

• elPages: String|NodeList|空，可滑动容器（指的是传个Slip方法的dom元素）内的子元素，可以传一个CSS选择器（String），也可以传子元素列表（nodeList），也可以传空，传空情况下会取所有容器内的子元素。

height

设置轮播器的高度

Slip(ele, "x").slider().height(200);

参数

• num: Number|String, 高度值，数字或者带有px的值。

width

设置轮播器的宽度

参数

• num: Number|String, 宽度值，数字或者带有px的值。

属性

page

当前轮播器在第几页

Slip(ele, 'x').end(function() {
  console.log(this.page);
});

Webapp 全屏网页

如搜狐视频客户端完美适配iOS8这种形式的网页。

方法

webapp

Slip(ele, "y").webapp();

源码

源码用CoffeeScript书写，slip.js为其生成代码。查看源码。