<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>html5向左滑动删除特效</title>
<style>
* {
padding: 0
margin: 0
list-style: none
}
header {
background: #f7483b
border-bottom: 1px solid #ccc
}
header h2 {
text-align: center
line-height: 54px
font-size: 16px
color: #fff
}
.list-ul {
overflow: hidden
}
.list-li {
line-height: 60px
border-bottom: 1px solid #fcfcfc
position: relative
padding: 0 12px
color: #666
background: #f2f2f2
-webkit-transform: translateX(0px)
}
.btn {
position: absolute
top: 0
right: -80px
text-align: center
background: #ffcb20
color: #fff
width: 80px
}
</style>
<script>
/*
* 描述：html5苹果手机向左滑动删除特效
*/
window.addEventListener('load', function() {
var initX//触摸位置
var moveX//滑动时的位置
var X = 0//移动距离
var objX = 0//目标对象位置
window.addEventListener('touchstart', function(event) {
event.preventDefault()
var obj = event.target.parentNode
if (obj.className == "list-li") {
initX = event.targetTouches[0].pageX
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1
}
if (objX == 0) {
window.addEventListener('touchmove', function(event) {
event.preventDefault()
var obj = event.target.parentNode
if (obj.className == "list-li") {
moveX = event.targetTouches[0].pageX
X = moveX - initX
if (X >= 0) {
obj.style.WebkitTransform = "translateX(" + 0 + "px)"
} else if (X <0) {
var l = Math.abs(X)
obj.style.WebkitTransform = "translateX(" + -l + "px)"
if (l >80) {
l = 80
obj.style.WebkitTransform = "translateX(" + -l + "px)"
}
}
}
})
} else if (objX <0) {
window.addEventListener('touchmove', function(event) {
event.preventDefault()
var obj = event.target.parentNode
if (obj.className == "list-li") {
moveX = event.targetTouches[0].pageX
X = moveX - initX
if (X >= 0) {
var r = -80 + Math.abs(X)
obj.style.WebkitTransform = "translateX(" + r + "px)"
if (r >0) {
r = 0
obj.style.WebkitTransform = "translateX(" + r + "px)"
}
} else { //向左滑动
obj.style.WebkitTransform = "translateX(" + -80 + "px)"
}
}
})
}
})
window.addEventListener('touchend', function(event) {
event.preventDefault()
var obj = event.target.parentNode
if (obj.className == "list-li") {
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1
if (objX >-40) {
obj.style.WebkitTransform = "translateX(" + 0 + "px)"
objX = 0
} else {
obj.style.WebkitTransform = "translateX(" + -80 + "px)"
objX = -80
}
}
})
})
</script>
</head>
<body>
<header>
<h2>消息列表</h2>
</header>
<section class="list">
<ul class="list-ul">
<li id="li" class="list-li">
<div class="con">
你的快递到了，请到楼下签收
</div>
<div class="btn">删除</div>
</li>
<li class="list-li">
<div class="con">
哇，你在干嘛，快点来啊就等你了
</div>
<div class="btn">删除</div>
</li>
</ul>
</section>
</body>
</html>
1、创建两个html文件，一个test一个test2。
2、打开test页面，在里面创建一个div，并给其添加onmousedown与move方法。
3、打开后我们发现是一个棕绿的页面。
4、定义两个变量，startx为鼠标按下的坐标，endx为鼠标移动的坐标。
5、实现鼠标点击执行的down方法，在里面通过clientX获得鼠标按下坐标，并赋值给startx。
6、接着在实现鼠标移动的move方法，获得鼠标移动的坐标，并通过startx与endx相减判断是否向左边滑动大于30的距离，是的话就切换到test2页面。
7、现在我们打开test页面，向左滑动会提示切换页面（这个可以去除），确定后就切换到了test2页面，向右滑动切换的方法同理。
1、如果是div设置了滚动条导致滑动不顺畅，可以在css中加入-webkit-overflow-scrolling : touch2、如果是幻灯片，可以用swiper插件一类的。
3、尽量用css3开启GPU加速（css随便哪里加个{transform:transition3d(0,0,0)}），用transform:translate(x,y)代替mairgin或者top。
4、减少滑动过程中的运动DOM。
