移动WEB模拟原声APP滑动删除
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟App滑动删除</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1454057613_1757398.css">
<style>
body {
background-color: #f2f2f2;
}
h1 {
text-align: center;
font-size: 1.4em;
padding-top: 2em;
padding-bottom: 2em;
}
.wrapper {
position: relative;
height: 100px;
overflow: hidden;
padding-bottom: 5%;
}
.container {
position: absolute;
left: 0;
100%;
height: 100px;
line-height: 100px;
padding-left: 5%;
box-sizing: border-box;
background-color: #fff;
transition: left cubic-bezier(.68,.69,.11,.4) 0.2s;
-webkit-transition: left cubic-bezier(.68,.69,.11,.4) 0.2s;
font-size: 1.2em;
font-weight: 200;
}
.delete {
float: left;
position: absolute;
100px;
top: 0;
right: -100px;
background-color: #f00;
color: #fff;
text-align: center;
height: 100px;
line-height: 100px;
}
.delete i.iconfont {
font-size: 1em;
padding-right: 5px;
}
p {
text-align: center;
padding-top: 4em;
padding-bottom: 6em;
color: #555;
font-size: 1em;
}
</style>
</head>
<body>
<h1>移动WEB模拟原声APP滑动删除</h1>
<div class="wrapper">
<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
</div>
<div class="wrapper">
<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
</div>
<div class="wrapper">
<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
</div>
<div class="wrapper">
<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
</div>
<div class="wrapper">
<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
</div>
<p>西安领可网络 ChenShuo 2016</p>
<script>
var container = document.querySelectorAll('.container');
for(var i=0; i<container.length; i++) {
var x, y, X, Y, swipeX, swipeY;
container[i].addEventListener('touchstart', function(event) {
x = event.changedTouches[0].pageX;
y = event.changedTouches[0].pageY;
swipeX = true;
swipeY = true ;
});
container[i].addEventListener('touchmove', function(event) {
X = event.changedTouches[0].pageX;
Y = event.changedTouches[0].pageY;
// 左右滑动
if(swipeX && Math.abs(X-x) - Math.abs(Y-y) > 0) {
// 阻止事件冒泡
event.stopPropagation();
if(X - x > 10) {
event.preventDefault();
this.style.left = '0px';
}
if(x - X > 10) {
event.preventDefault();
this.style.left = '-100px';
}
swipeY = false;
}
// 上下滑动
if(swipeY && Math.abs(X-x) - Math.abs(Y-y) < 0) {
swipeX = false;
}
});
}
</script>
</body>
</html>