从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
1 $(function() {2 var hammertime = $('.tabs a').hammer();3 hammertime.on('tap', function(ev) {4 $(this).addClass('actives').siblings().removeClass('actives');//添加一个class 同辈级移除。5 var index = $('.tabs a').index(this); //索引6 $('.tab-bott').eq(index).show().siblings().hide(); 7 })8 })
推荐个前端群:群名称:html5/css3/js/jq/nodejs/div 群号:339840649 欢迎加入 一起交流。
- 1楼周衣谷
- 不依赖jquery吧
- Re: 黎某人
- @周衣谷,估计还是得依赖jquery,加载的文件更多了
- Re: peerless_she
- @周衣谷,可以不依赖jquery,直接引入hammer.js就行。,个人感觉还是用jq爽