百度touch的手势框架,touch.js
今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的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类事件开关
}
所以,整体来说还是不错的一个框架,更多具体的请大家移步到官网看文档,毕竟是国内开发的,中文文档比较容易上手,大家使用过程中有什么问题欢迎交流,我说的不对也欢迎提出。
百度touch的手势框架,touch.js的更多相关文章
- H5案例分享:JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- 移动端手势库Hammer.js学习
感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- Chrome下的语音控制框架MyVoix.js使用篇(四)
在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框 ...
- CCLayer在Touch事件(Standard Touch Delegate和Targeted Touch Delegate)
在做练习,触摸故障,看到源代码,以了解下触摸事件. 练习操作:直CClayer子类init在 this->setTouchEnabled(true); 事件处理方法覆盖 virtual bool ...
- 一款很便捷很实用的框架——vue.js
Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...
- 前端测试框架对比(js单元测试框架对比)
前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...
随机推荐
- redis 源码分析
参考: http://redisbook.readthedocs.org/en/latest/index.html http://www.databaseskill.com/3421161/ The ...
- 自动化测试——case编写
简单总结一下最近项目里遇到的问题和解决的方法,可能不全,因为之前做的时候太匆忙了,很多点都没有记录下来,能记得多少是多少吧.纲巴蝶! 1. 问题:犯错误,新增case后忘记把编码也写上去了,后来跑脚本 ...
- Android新浪微博客户端(六)——Home界面的ListView
原文出自:方杰|http://fangjie.info/?p=184转载请注明出处 最终效果演示:http://fangjie.info/?page_id=54该项目代码已经放到github:http ...
- 红领的短板:线下“O”瓶颈_财经频道_一财网
红领的短板:线下"O"瓶颈_财经频道_一财网 红领的短板:线下"O"瓶颈
- oracle创建表空间,用户,授权等
#oracle数据库安装完成后,有两个系统级的用户system 默认密码为 :managersys 默认密码为 :change_on_install #创建表空间tbs_xxxdba,初始大小1G,每 ...
- C primer plus 读书笔记第八章
本章的标题是字符输入/输出和输入确认.主要内容是讨论用于I/O的标准函数. 1.getchar()和putchar() 这两个函数之前用过,我们通过这两个函数来讨论下缓冲区. #include &qu ...
- Mysql + keepalived 实现双主热备读写分离【转】
Mysql + keepalived 实现双主热备读写分离 2013年6月16日frankwong发表评论阅读评论 架构图 系统:CentOS6.4_X86_64软件版本:Mysql-5.6.12 ...
- HDFS集群balance(3)-- 架构细节
转载请注明博客地址:http://blog.csdn.net/suileisl HDFS集群balance,对应版本balance design 6 如需word版本,请QQ522173163联系索要 ...
- [week4]每周总结与工作计划
计算机网络 TAT 小白dp 28号还有一场 背单词 背马克思 python目标80% 熟悉coursera c++模版和 仿函数 人文修养 开学数据库,itercast的sql*2 itercast ...
- php中运用GD库实现简单验证码
昨天学习了运用php的GD库进行验证码的实现. 首先可以用phpinfo()函数看一下GD库有没有安装,我用的wampserver是自动给安装的. 主要的步骤是: 1.生成验证码图片 2.随机生成字符 ...