时间:2021-05-18
从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(); })})以上所述就是本文的全部内容了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近要涉及微信移动端项目,所以尝试学习一些移动端的实用技能,这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字
Vue-Awesome-Swiper轮播图插件,可以同时支持Vue.js(1.X~2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使
该问题是由angular使用jq日期插件导致的无法双向绑定解决方法:重新绑定setInterval(function(){$scope.$apply(funct
最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候,点击事件失效,
使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问