移动端JQ插件hammer使用详解


Posted in Javascript onJuly 03, 2015

从pc端到移动端相信很多前端攻城师为移动端发愁,写原声的手机端事件是非常费力的, 而jq的click有300毫秒延迟,现在有了比较不错的jq插件hammer,Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件支持各种手机事件,比如缩放 ,qq左滑动删除,  放大, 旋转等。

下面用一个tab切换来介绍hammer。

用法:

1,首先引入jq2.0以上版本和jquery.hammer.js.

2,获取元素,和jq一样,在后面加上hammer就可以了    var hammertime = $('.tabs a').hammer();

3,可以直接用on直接添加事件hammertime.on('tap', function(ev) {} 这样用了hammer中的tap点击事件。function里可以写自己的js。

hammer.dragstart = function(ev) { };// 开始拖动</span>

hammer.drag = function(ev) { }; // 拖动中</span>
hammer.dragend = function(ev) { }; // 拖动结束</span>
hammer.onswipe = function(ev) { }; // 滑动</span>
 
hammer.tap = function(ev) { }; // 单击</span>
hammer.doubletap = function(ev) { }; //双击</span>
hammer.hold = function(ev) { };// 长按</span>
 
hammer.release = function(ev) { }; // 手指离开屏幕</span>

体验链接:http://hammerjs.github.io/

js code

$(function() {
var hammertime = $('.tabs a').hammer();

hammertime.on('tap', function(ev) {


$(this).addClass('actives').siblings().removeClass('actives');//添加一个class 同辈级移除。


var index = $('.tabs a').index(this); //索引


$('.tab-bott').eq(index).show().siblings().hide(); 

})
})

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 #Javascript
Javascript实现字数统计
Jul 03 #Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 #Javascript
jQuery中 delegate使用的问题
Jul 03 #Javascript
JavaScript实现select添加option
Jul 03 #Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 #Javascript
Javascript中的作用域和上下文深入理解
Jul 03 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php文件缓存类汇总
2014/11/21 PHP
php修改数组键名的方法示例
2017/04/15 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
python实现可变变量名方法详解
2019/07/01 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
英文求职信范文
2014/05/23 职场文书
超市创意活动方案
2014/08/15 职场文书
教师党员个人总结
2015/02/10 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
SQL基础的查询语句
2021/11/11 MySQL