左滑删除功能
完整代码如下： （touch.js）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>touch事件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src='./js/jquery-1.9.0.min.js'></script>
<script src="./js/touch.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
.list {
height: 70px;
margin-bottom: 10px;
white-space: nowrap;
position: relative;
}
.left {
display: inline-block;
width: 100%;
height: 70px;
background: #eeeeee;
text-align: center;
line-height: 70px;
}
.right {
display: inline-block;
width: 100px;
height: 70px;
background: #eb3639;
color: #ffffff;
text-align: center;
line-height: 70px;
margin-left: -5px;
}
</style>
</head>
<body>
<div class="main">
<div class="list">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="list">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="list">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="list">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</div>
</body>
<script>
$(function () {
function slider( item ) {
var obj = item.obj;
if ( !obj.is('.list') ) {
obj = obj.parent('.list');
}
$('.list').not(obj).animate({
left: 0
},'normal'); obj.animate({
left: item.left
}, 'normal');
}
//左滑
touch.on(document, 'swipeleft', function ( ) {
slider({
obj: $(this),
left: '-100px'
})
});
//右滑
touch.on(document, 'swiperight', function () {
slider({
obj: $(this),
left: 0
})
})
})
</script>
</html>
效果图： 