移动端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实现下拉框的动态添加(附效果)
Apr 03 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
js同源策略详解
May 21 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python tornado使用流生成图片的例子
2019/11/18 Python
使用python绘制二维图形示例
2019/11/22 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
Java编程面试题
2016/04/04 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
教师节活动总结
2014/08/29 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
财务工作个人总结
2015/02/27 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers