您的位置：首页 > Web前端 > JavaScript

【插件】用hammer.js插件实现网页手势操作

2016-03-30 10:29 567 查看

在开发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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航