移动端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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
使用onbeforeunload属性后的副作用
Mar 08 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
微信API接口大全
2015/04/15 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js单词形式的运算符
2014/05/06 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
vue页面更新patch的实现示例
2020/03/25 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python线程join方法原理解析
2020/02/11 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python 基于wx实现音乐播放
2020/11/24 Python
python matlab库简单用法讲解
2020/12/31 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
大二自我鉴定
2014/01/31 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
党员对照检查材料
2014/09/22 职场文书
民事和解协议书格式
2014/11/29 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS