移动端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 相关文章推荐
js加强的经典分页实例
Mar 15 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
ES6函数和数组用法实例分析
May 23 Javascript
js实现弹幕飞机效果
Aug 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
十天学会php之第四天
2006/10/09 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
JS交换变量的方法
2015/01/21 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Python AES加密实例解析
2018/01/18 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python多线程与多进程及其区别详解
2019/08/08 Python
pandas的相关系数与协方差实例
2019/12/27 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
心理健康教育制度
2014/01/27 职场文书
买卖合同协议书范本
2014/10/18 职场文书
工作收入住址证明
2014/10/28 职场文书
2015年行政部工作总结
2015/04/28 职场文书
初一英语教学反思
2016/02/15 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Golang jwt身份认证
2022/04/20 Golang