主页 > 前端 > javascript >
来源:未知 时间:2016-06-30 18:06 作者:xxadmin 阅读:次
[导读] 今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除。 它是百度团队开发的,现在由百度云Clouda进行维护。 官网 http://touch.code.baidu....
今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除。 它是百度团队开发的,现在由百度云Clouda进行维护。 官网 http://touch.code.baidu.com/ CND的min http://touch.code.baidu.com/touch-0.2.14.min.js 在我上一篇文章里有提到怎么去使用hammer.js的框架,他有个比较让人烦躁的缺点,就是事件绑定,每次只能绑定一个DOM元素,而且每次都需要去NEW 一个函数,大家都知道,每new一次都会在内存开辟一个新的空间,也就是他比较占用内存。 如: var obj = new Hammer( document.getElementById('element') ); obj.on('tap',function); 如果是这样,会给我们造成比较多的麻烦。 所以今天就简单说说touch.js这个框架给我们开发带来的便利。 以下是官网给我们带来的demo。比较有趣的单手指旋转,当然这个我们可以自己通过原生的ontouch事件自己封装。 DEMO : http://touch.code.baidu.com/examples.html 我们看看它是如何给一个DOM快速选择并且绑定事件的。 代码: touch.on(".div","tap",function); 就这样简单就能选择到所有class为div的DOM元素加了一个点击事件。 并且事件里面的this指向了发生事件的原生DOM的元素。 event对象是我们做手势里用处比较多的一个对象,如发生的距离的X/Y,发生的type等。 总之用起来相对hammer.js还是比较不错的,具体要到开发项目中看看遇见什么麻烦或者BUG才能知道。 他自带的手势事件支持有: 缩放(pinch) 旋转(rotate) 滑动(swipe) 拖动(drag) 长按(hold) 敲击/双击(tap/doubletap) 并且有简单的配置。touch.config( {} ) 配置是各个事件的开关以及其他,如 : { tap: true,//tap类事件开关, 默认为true doubleTap: true,//doubleTap事件开关, 默认为true hold: true, //hold事件开关, 默认为true holdTime: 650, //hold时间长度 swipe: true, //swipe事件开关 swipeTime: 300, //触发swipe事件的最大时长 swipeMinDistance: 18, //swipe移动最小距离 swipeFactor: 5, //加速因子, 值越大变化速率越快 drag: true, //drag事件开关 pinch: true, //pinch类事件开关 } 所以,整体来说还是不错的一个框架,更多具体的请大家移步到官网看文档,毕竟是国内开发的,中文文档比较容易上手,大家使用过程中有什么问题欢迎交流,我说的不对也欢迎提出。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com