移动端JQ插件hammer使用详解
**
移动端JQ插件hammer使用详解
**
用法:
1,首先引入jq2.0以上版本和jquery.hammer.js.
2,获取元素,和jq一样,在后面加上hammer就可以了
var hammertime = $('.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>
**
用例1:
**
$(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(); })
})
**
用例2
**
<body>
31 <div id="test" class="test">事件区域</div>
32 <div id="result" class="result">事件结果:点击触发<br /></div>
33 <script type="text/javascript">
34 //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
35 var hammertime = new Hammer(document.getElementById("test"));
36 //添加事件
37 hammertime.on("tap", function (e) {38 document.getElementById("result").innerHTML += "点击触发了,长按无效<br />";
39 //控制台输出
40 console.log(e);
41 });
42 </script>
43 </body>
用例3
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Bootstrap 实例 - 轮播(Carousel)插件方法</title><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/hammer.min.js" type="text/javascript"></script><script src="js/hammer.js" type="text/javascript"></script>
</head>
<body><div id="myCarousel" class="carousel slide"><!-- 轮播(Carousel)指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0"class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播(Carousel)项目 --><div class="carousel-inner"><div class="item active"><img src="data:images/1.jpg" alt="First slide"></div><div class="item"><img src="data:images/2.jpg" alt="Second slide"></div><div class="item"><img src="data:images/3.jpg" alt="Third slide"></div></div><!-- 轮播(Carousel)导航 --><a class="carousel-control left" href="#myCarousel"data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel"data-slide="next">›</a><!-- 控制按钮 --><div style="text-align:center;"><input type="button" class="btn start-slide" value="Start"><input type="button" class="btn pause-slide" value="Pause"><input type="button" class="btn prev-slide" value="Previous Slide"><input type="button" class="btn next-slide" value="Next Slide"><input type="button" class="btn slide-one" value="Slide 1"><input type="button" class="btn slide-two" value="Slide 2"><input type="button" class="btn slide-three" value="Slide 3"></div>
</div>
<script>$(function(){// 初始化轮播$(".start-slide").click(function(){$("#myCarousel").carousel('cycle');});// 停止轮播$(".pause-slide").click(function(){$("#myCarousel").carousel('pause');});// 循环轮播到上一个项目$(".prev-slide").click(function(){$("#myCarousel").carousel('prev');});// 循环轮播到下一个项目$(".next-slide").click(function(){$("#myCarousel").carousel('next');});// 循环轮播到某个特定的帧$(".slide-one").click(function(){$("#myCarousel").carousel(0);});$(".slide-two").click(function(){$("#myCarousel").carousel(1);});$(".slide-three").click(function(){$("#myCarousel").carousel(2);});var hammertime = new Hammer(document.getElementById("myCarousel"));//添加事件hammertime.on("swipeleft", function () {/*alert('1');*/$(this).carousel('next');});hammertime.on("swiperight", function () {/*alert('2');*/$(this).carousel('next');});});
</script>
</body>
</html>
移动端JQ插件hammer使用详解相关推荐
- WCF服务端运行时架构体系详解[下篇]
作为WCF中一个核心概念,终结点在不同的语境中实际上指代不同的对象.站在服务描述的角度,我们所说的终结点实际上是指ServiceEndpoint对象.如果站在WCF服务端运行时框架来说,终结点实际上指 ...
- ios无痕埋点_移动端无痕埋点实践详解(二)
0x01 前言 在移动端无痕埋点实践详解(一)这篇文章大致总结了移动端无痕埋点的基本原理.主要介绍了什么是无痕埋点,无痕埋点的基础数据流程以及在Android系统上总体思路.这篇文章着重总结下无痕埋点 ...
- python 录制web视频_Python django框架 web端视频加密的实例详解
视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端 参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play ...
- python做插件应用_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
- python插件使用教程_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
- python加载机制_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
- jquery.uploadify php,jquery插件uploadify使用详解
这次给大家带来jquery插件uploadify使用详解,jquery插件uploadify使用的注意事项有哪些,下面就是实战案例,一起来看一下. 有时项目中需要一个文件批量上传功能时,个人认为upl ...
- 单端怎么转差分信号_单端转差分信号电路详解
单端输入指信号有一个参考端和一个信号端构成,参考端一般为地端,差分是将单端信号进行差分变换,输出两个信号,一个和原信号同相,一个和原信号反相.差分信号有较强的抗共模干扰能力,适合较长距离传输,单端信号 ...
- Web端即时通讯技术原理详解
Web端即时通讯技术原理详解 前言 在web端的IM即时通讯应用,由于浏览器的兼容性以及其固有的"客户端请求服务器处理并响应"的C/S通信模型,造成了要在浏览器中实现一个兼容性较好 ...
最新文章
- oracle xmltype转字节,extractvalue处理XMLTYPE类型超过4000字节ORA-01706的解决方法
- C++引用入门教程(一)
- python +java 用socket在局域网进行图片上传给springboot后端并进行前端访问
- java synchronized wait
- Restlet框架– Hello World示例
- WPF中在XAML中实现数据类型转换的两种方法
- java类中的static块_java类中static代码块的执行次数
- 分享-追书神器旧版本-无广告、可换源看小说
- PHP常用代码大全(新手入门必备)
- .Net使用FlashPaper
- 杀毒软件巨头荣光不复 瑞星信息去年亏损7300万元
- Sqlmap免Python版启动器的小修改(根据学习进度逐步更新)
- 2022年全球市场颈椎按摩仪总体规模、主要生产商、主要地区、产品和应用细分研究报告
- matlab判断星期几的语句,计算某一天是星期几的matlab程序
- html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
- SpringBoot启动图标修改(通俗易懂)
- 不等式$\sum x_i^3(1-x_i)\leq\frac{1}{8}$
- java故事之以月引序
- 记单词 真的挺容易--音标
- SGM58031的IIC接口调试过程
热门文章
- 蓝桥杯学习笔记三:Delay函数毫秒变微秒
- 解决adb连接不上模拟器
- linux inotify 监控文件系统事件
- js秒转换成天、时、分、秒
- 有没有测试女生暗恋的软件,心理测试:下面哪个小女孩和你气质最像?测目前有没有人偷偷喜欢你...
- mysql创建表语句like_MySQL 的create table as 与like 的使用
- ofo创始人“谢幕”,我们的押金恐怕真拿不回来了
- 彻底击垮面试官心理防线,放下戒备,听你吹
- gamebuino制作的小游戏之2048代码分析 loop部分
- 字符串函数:strlen函数,strcpy函数,strcat函数,strcmp函数