移动端JQ插件hammer使用详解

移动端JQ插件hammer使用详解

从pc端到移动端相信很多前端攻城师为移动端发愁，写原声的手机端事件是非常费力的， 而jq的click有300毫秒延迟，现在有了比较不错的jq插件hammer，Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件支持各种手机事件，kKiBljiDj比如缩放 ，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) { };// 开始拖动

hammer.drag = function(ev) { }; // 拖动中

hammer.dragend = function(ev) { }; // 拖动结束

hammer.onswipe = function(ev) { }; // 滑动

hammer.tap = function(ev) { }; // 单击

hammer.doubletap = function(ev) { }; //双击

hammer.hold = function(ev) { };// 长按

hammer.release = function(ev) { }; // 手指离开屏幕

体验链接：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();

　　})

})

以上所述就是本文的全部内容了，希望大家能够喜欢。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。