javascript手势操作插件 base-gesture.js

有人说,学习是一个重复造轮子的过程,so....。我也造了个轮子玩哟。

学习js有段时间了,一直想做点小东西之类的。之前有做过jquery插件之类的。。不过呢,还是想试用下原生js(感觉屌=一点。哈哈哈哈)。现在移动端不是很火嘛(跟风狗。。。。)于是就写了写js的手势操作的实现。当然现在有许多手势插件了,非常优秀。例如hammer.js。但是总有自己造个轮子的执念嘛~~~

下面,就说说我自己造的轮子:     base-geture.js

目前呢,我实现的有,click,tap,swipeLeft,swipeRight,swipeUp,swipeDown,以及end这几方法。click,tap点击事件,swipeLeft,swipeRight左右滑动。swipeUp,swipeDown上下滑动。end 手势结束需要进行的操作(例如,鼠标弹起,手指离开屏幕,完成一次手势操作的时触发)。怎么用呢。。也很简单:

首先script标签导入base-gesture.js文件,或者import

使用:

var t = new gesture('#test',{

    click:function(){},

    swipeLeft:function(event){}

........

});或者

var t = new gesture('#test');

t.swipeUp(function(event){

});

这里对swipeUp,swipeDown,swipeLeft,swipeRight方法的event对象特别说明下。

在swipeUp和swipeDown的event对象中,我添加了event.gapY,表示与上次触发ontouchmove或者mousemove时的y轴距离。event.moveY,表示距离手势操作开始时候的y轴距离。

在swipeLeft和swipeRight的event对象中,我添加了event.gapX,表示与上次触发ontouchmove或者mousemove时的x轴距离。event.moveX,表示距离手势操作开始时候的x轴距离。

至于为什么添加gapX,moveY。我觉得还是蛮实用的。在应用中,比如要实现一个新版qq消息,左右拖动,跟随移动的时候。gapX就显得非常有用。你只要不断累加gapX,就可以实现,不断左右滑动效果.我自己实现了下这个效果:demo.查看下源码你就知道怎么用了~~

然后,我实现了一个全页滚动的效果,就是你上划一下,就滚动到下一页那种,都是基于base-gesture.js实现。代码简单.demo

实现的就这些了,代码托管到github了。。传送门:github(假如能start一下,便是极好的)

应该会存在一些问题,如果遇到,评论告诉我啊。一起解决(毕竟我很菜..)

现在只实现了对单指的支持,希望能继续完善吧。荆轲刺秦王》》(王尼玛,打我呀,哈哈哈)

你可能感兴趣的:(JavaScript,插件,手势操作)