移动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>