实现一个javascript手势库 -- base-gesture.js

  现在移动端这么普及呢,我们在手机上可以操作更多了。对于网页来说实现一些丰富的操作感觉也是非常有必要的,对吧(如果你仅仅需要click,,那就当我没说咯。。。)~~比如实现上下,左右滑动,点击之类的,加上这些东西就感觉网页会库不少呢~~(舒服)。当然啦。原生javascript并没有为我们提供这些花里胡哨的东西,需要我们自己去实现下喽。又当然,,现在还是有许多js手势库的,比如hammer.js之类的。但是,学习是一个重复造轮子的过程(不知道那位伟人所多,如果无人认领,那就是我说的~~~~~~~~~)对吧。自己造个轮子玩,可能不能用在跑车上,但或许用在拖拉机上不错也说不定喽.

  好啦,好啦,前戏就这么多。下面就是主题啦。。说说实现一个自己的手势库。我把它叫做base-gesture.js 传送门在次:gesture(GitHub。。。star一下可好)

  然后嘞,讲讲思路喽。(仅仅是我个人的想法。。不做任何保证,也不负责。打我呀~)一个小起点,在移动端呢,如果使用click会有个300ms延迟,原因是移动端需要一个双击放大的判断,所以导致这个问题,具体点可以自己gooole或百度.为了避免这个问题我们就需要对touchstart,touchend这两个事件进行监听,已实现一个tap事件。然后你有非常好学,去百度了下,发现它们还有一个touchmove兄弟事件存在。。在我看来这三兄弟和mousedown,mouseup,mousemove贼像,那我们就可以利用这三个事件来实现一些基本的手势操作了。我实现呢。主要是在touchstart得时候记录一个startX,和一个startY就是起始位置啦。然后在touchmove时候在记录一个endX和一个ewndY。现在我们有两个点的坐标了哦。那就好说了,稍微运用下数学知识求下两点之间的夹角,有这个夹角了,你在判断下endX-startX以及endY-startY的正负你就可以基本实现了判断上,下左右滑动了哦~~还行吧

  当然,有这些还是不够的,我们知道,(你必须知道)touchstart只在按下屏幕那一刻触发,这就导致startX与startY只要手指不松开,它就不会变,而这个直接导致的问题就是,你左划后再继续右划,之前的判断方法依然判断为左划,,直到到你右划过了起始点。哇,这个问题就很尴尬了。。简直是废的喽。这就需要解决下喽。我呢,决定多加几个参数辅助下喽,第一组就是compareX和compareY他们在touchstart时候初始化和startx和starty值一样喽,需要他们呢主要是不希望startX和startY值不要变(后面还有用),他们就替代去完成一些任务,在touchmove可能就会更新它们的值(中途方向改变的时候)。然后就是两个数组了,gatherX以及gatherY。他们的第一位保存的是上一次触发touchmove时候记录的endX/Y-compareX/Y的值,第二位保存的是当前endX/Y-compareX/Y的值,这个时候我们就要判断gatherX/Y[1]-gatherX/Y的时候大小了,如果它小于零,恭喜你,它方向改变了(不知道有没有讲清楚,大概意识就是你从家里出去一直向外走了100米记录保存在gatherX/Y第一位上,下一秒这个距离变成94米了,保存在第二位上,一减小于零,说明你回头走了呀)。这个时候,把compareX/Y等于endX/endY表示一个新的手势的起点,然后gatherX/gatherY清空,这样就基本实现了,就算它中途非常手贱的不停移动,也没问题,也能触发正确对应事件。

  基本的框架能思路就是这样了,他至少能判断上下左右滑动了。当然为了让它实用一点我为event加了两个属性,event.gapX/Y表示距离上一次触发touchmove在X/Y轴上滑动的距离,以及evnt.moveX/Y表示手势结束到手势开始的位置的距离。这两个还是非常有用的。。至少我这么认为(因为是本宝宝想的~~)。有了这些主要思路,接下来你就给他们封装性下,实现个小插件就可以了啊,上面右地址,你可以直接看,readme感觉基本上也都血比较清楚(感觉有点乱~~~),请务必提意见以及发现的问题啊,大家一起学习。我呢,用自己的轮子造了两辆破车,破车1,破车2(绝对正经私家车)。第二个例子就是一个类似整页上划的东西啦。

  对了,还实现了对鼠标的支持,思路一样啦,就是该成相应的mouse事件就可以啦,就这些啦,希望大家一起进步与完善,让这个轮子更牛逼,说不定那天能成为跑车主胎呢(好吧,可能脑子太困糊涂了)。共勉啦,欢迎提问,以及拍砖哦

  

时间: 2024-10-03 14:14:55

实现一个javascript手势库 -- base-gesture.js的相关文章

强悍的javascript手势库

/** * Toucher * git:https://github.com/cometwo/Toucher-1 */ "use strict"; (function (root, factory) { if (typeof define === "function" && define.amd) { define([], function () { return factory(root); }); } else { root.Toucher =

JavaScript加密库jQuery.md5.js

JavaScript简单的MD5加密库jQuery.md5.js,简单用法如下: //Create (hex-encoded) MD5 hash of a given string value: var md5 = $.md5('value'); //Create (hex-encoded) HMAC-MD5 hash of a given string value and key: var md5 = $.md5('value', 'key'); //Create raw MD5 hash o

一个最小手势库的实现

众所周知,浏览器暴露了四个事件给开发者,touchstart touchmove touchend touchcancel,在这四个事件的回调函数可以拿到TouchEvent.TouchEvent:touches:当前位于屏幕上的所有手指动作的列表targetTouches:位于当前 DOM 元素上的手指动作的列表changedTouches:涉及当前事件的手指动作的列表TouchEvent里可以拿到各个手指的坐标,那么可编程性就这么产生了. Tap点按 移动端click有300毫秒延时,tap

完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts.AmChart,技术服务好,厂家的支持给力,总是物有所值.随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了.虽然和Fusioncharts.AmChart,这样的大品牌比起来,是小巫见大巫,不过这并不代表他们不行,相反,他们各有各的独特魅力,值得我们去发现他.使用它! Planetary.js 是一个JavaScript图表库,用于构建交互式地球仪.它使用D3 和TopoJSON 解析并显示地理数据. Planetary

基于Grunt构建一个JavaScript库

现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并使用JavaScript书写,所以任何为JavaScript库或项目工作的人都可以按自己的需要扩展它. 本文解释如何使用Grunt.js构建JavaScript库.Grunt.js依赖Node.js和npm,所以第一节解释其是什么,如何安装和使用.如果你对npm有了解,那你可以跳过这一节.第四和第五

JavaScript图表库的新选择!LightningChart JS入门须知了解一下

对于LightningChart JS,可能很多用户并不是很了解这个产品,这是由Arction Ltd公司最新推出的JavaScript图表库工具.LightningChart JS是Web上性能最高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源. GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画.非常适合用于贸易,工程,航空航天,医药和其他领域的应用. 入门视频 LightningChart JS入门视频(一):使用JavaScr

优雅的创建一个JavaScript库

这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不打算使用jQuery.通常情况下,一个JavaScript库不需要任何依赖. 首先,我遇到了第一个麻烦,即如何正确的看待一个JavaScript库.在C/C++中,一个库是功能的集合,并且通常不需要很完美的结构.而JavaScript的工作方式有所不同,因此我做了一些研究.最后的结论是,一个Java

Ember.js:一个JavaScript框架

Ember.js v2.7.3 发布了. Ember.js是一个JavaScript框架,它极大地减少了构建Web应用程序所需要的时间,精力和资源(腾云科技ty300.com).它的重点是使开发者尽可能高效地处理重复和琐碎的评论,能更好地参与Web项目的开发. Ember.js还为大家提供了Javascript,HTML和浏览器(基础教程qkxue.net),为你创建下一个杀手级的web应用程序提供一切最先进功能的访问. 构建Ember.js 确认Node.js 和 bower 已经安装.运行

OpenPGP协议的一个JavaScript实现:OpenPGP.js

OpenPGP.js 是OpenPGP协议的一个Javascript实现. 基于 JavaScript的OpenPGP实现方便用户可以直接在浏览器中加密和解密Web邮件,不需要专门的邮件客户端.