移动端JQ插件hammer使用详解
从pc端到移动端相信很多前端攻城师为移动端发愁,写原声的手机端事件是非常费力的,而jq的click有300毫秒延迟,现在有了比较不错的jq插件hammer,Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件支持各种手机事件,比如缩放,qq左滑动删除, 放大,旋转等。
下面用一个tab切换来介绍hammer。
用法:
1,首先引入jq2.0以上版本和jquery.hammer.js.
2,获取元素,和jq一样,在后面加上hammer就可以了 varhammertime=$('.tabsa').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/
jscode
$(function(){
varhammertime=$('.tabsa').hammer();
hammertime.on('tap',function(ev){
$(this).addClass('actives').siblings().removeClass('actives');//添加一个class同辈级移除。
varindex=$('.tabsa').index(this);//索引
$('.tab-bott').eq(index).show().siblings().hide();
})
})
以上所述就是本文的全部内容了,希望大家能够喜欢。
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下