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了。。传送门：gesture(假如能start一下，便是极好的)

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

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