移动端JQ插件hammer使用详解_Javascript教程-查字典教程网
移动端JQ插件hammer使用详解
移动端JQ插件hammer使用详解
发布时间:2016-12-30 来源:查字典编辑
摘要:从pc端到移动端相信很多前端攻城师为移动端发愁,写原声的手机端事件是非常费力的,而jq的click有300毫秒延迟,现在有了比较不错的jq插...

从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教程学习
    热门Javascript教程学习
    编程开发子分类