【插件】用hammer.js插件实现网页手势操作
来源:互联网 发布:qq视频录像软件 编辑:程序博客网 时间:2024/04/29 17:40
在开发web app页面或者做平常的微信页面开发的时候我们一贯的鼠标事件是不现实的,我们需要实现手势触摸和touch事件,像我这样的菜鸟要自己写这些手势touch事件代码,目前还是能力有限^_^。
还好有大神们的插件,先做一个拿来主义者吧,这里使用的是hammer,为什么要选着hammer不选着jqm等等其他的呢,因为个人觉得我只需要手势touch,不需要其他的,hammer里面只有纯粹的手势实现代码。
看看效果
所有使用方法都写到代码注释中了,就不在赘述了^_^
上代码
<!DOCTYPE html><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.min.js"></script> <title></title> <style type="text/css"> /*左边固定部分*/ #lt { position: absolute; top: 0px; left: -70px; width: 70px; text-align: center; } #lt div { line-height: 3em; color: #808080; border-bottom: 1px solid #D4D4D4; cursor: pointer; } /*被激活的tab样式*/ .curunt { line-height: 3em; color: #C0192A !important; border-left: 4px solid #C0192A; background: white; } /*右边自适应部分*/ #rt { position: absolute; top: 0px; left: 0px; width: 100%; right: 0; height: 100%; background: white; } /*左边tab添加手势滑动过度*/ #lt, #rt { transition: left 1s; -moz-transition: left 1s; -webkit-transition: left 1s; -o-transition: left 1s; } /*数据表格样式*/ .flexcss { width: 95%; font-size: 10pt; line-height: 3em; margin-left: 5%; } </style></head><body> <div id="lt"> <div class="curunt">白酒</div> <div>白酒</div> <div>白酒</div> <div>白酒</div> </div> <div id="rt"> <table class="flexcss"> <tr> <td colspan="3"> <h3>类型</h3> </td> </tr> <tr> <td>冰酒</td> <td>起泡酒</td> <td>干红葡萄酒</td> </tr> <tr> <td>冰酒</td> <td>起泡酒</td> <td>干红葡萄酒</td> </tr> <tr> <td>冰酒</td> <td>起泡酒</td> <td>干红葡萄酒</td> </tr> </table> <table class="flexcss"> <tr> <td colspan="3"> <h3>品牌</h3> </td> </tr> <tr> <td>马格普益乐</td> <td>马格普益乐</td> <td>干红葡萄酒</td> </tr> <tr> <td>马格普益乐</td> <td>马格普益乐</td> <td>干红葡萄酒</td> </tr> <tr> <td>马格普益乐</td> <td>马格普益乐</td> <td>干红葡萄酒</td> </tr> </table> </div> <script type="text/javascript"> //本页面暂未实现后台 //疑问联系【编码人】周杨 QQ1414294708 var e = window.event || e; //事件注册 function addListener(element, e, fn) { if (element.addEventListener) { element.addEventListener(e, fn, false); } else { element.attachEvent(e, fn); } } //加载手势库,判断左滑右滑 //container 是手势滑动区域,mc是讲区域加入手势监测管理,Swipe 是监测到滑动的手势 var container = document.getElementById('rt'), mc = new Hammer.Manager(container), Swipe = new Hammer.Swipe(); mc.add(Swipe); mc.on('swipeleft', function (e) { $("#lt").css("left", "-70px"); $("#rt").css("left", "0px"); }); mc.on('swiperight', function (e) { $("#lt").css("left", "0px"); $("#rt").css("left", "70px"); }); //tab切换 var lt = document.getElementById('lt').children; for (var i = 0; i < lt.length; i++) { addListener(lt[i], "click", function (e) { for (var i = 0; i < lt.length; i++) { var cild = $(e.target).parent().children()[i]; if (cild == e.target) { $(e.target).toggleClass("curunt"); } else { cild.className = ""; } } }); } </script></body></html>
源码下载:http://pan.baidu.com/s/1dETFD65
1 0
- 【插件】用hammer.js插件实现网页手势操作
- 移动端手势事件 hammer.JS插件
- hammer.js 手势操作
- Hammer.js 手势事件
- hammer.js手势
- javascript手势操作插件 base-gesture.js
- hammer.js实现背景图手势缩放调整位置
- hammer.js手势处理文档
- 图片手势放大+hammer.js
- js baidu插件实现网页分享功能
- Unity手势操作FingerGestures插件
- 可滑动切换的图片轮播——bootstrap中的carousel插件,hammer.js,jquery.hammer.js
- hammer.js – 多点触摸手势库
- 移动端手势库hammer.js
- hammer.js 一个多点触摸手势库
- 使用Hammer.js操作svg
- 使用hammer.js实现移动端webAPP手势滑动切换页面
- 移动端JQ插件hammer使用详解
- Win7 添加grub引导Linux最简单方法
- c语言复习2值指针实战
- NSStringTransform常量
- Linux时间子系统之(五):POSIX Clock
- 在sed中怎么样产生控制字符^M
- 【插件】用hammer.js插件实现网页手势操作
- 递归遍历目录的shell脚本
- 递归法遍历目录查找文件
- experiment目录递归,indent C standard style
- application/x-www-form-urlencoded
- Linux 2.6内核的编译步骤及模块动态加载
- 9.4. 使用 I/O 内存
- I-O 端口和 I-O 内存
- Linux 的虚拟文件系统--各结构之间的联系