-
<!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>
-
<script src=""></script>
-
<!--<script src=""></script>-->
-
-
<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: #ea5404; color: #fff; width: 80px}
-
</style>
-
<script>
-
/*
-
* 作者：sokie
-
* qq：2048226123
-
* 描述：第一次上传资源，有点粗糙，以后有时间会优化的
-
*
-
*/
-
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)";
-
}else{
-
obj.style.WebkitTransform = "translateX(" + -80 + "px)";
-
}
-
}
-
})
-
<!--zepto用下边这段代码写的delete删除功能-->
-
$('.btn').tap(function(){
-
$(this).parent().remove()
-
})
-
/*$('.btn').on('click touchstart',function(){
-
$(this).parent().remove()
-
})*/
-
-
})
-
-
</script>
-
-
</head>
-
<body>
-
<header>
-
<h2>消息列表</h2>
-
</header>
-
<section class="list" id="fff">
-
<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>
-
<div id="debug" ></div>
-
</body>
-
</html>
在引入zepto文件之后删除用这段代码
-
$('.btn').tap(function(){
-
$(this).parent().remove()
-
})
引入jquery之后用这段代码
-
*$('.btn').on('click touchstart',function(){
-
$(this).parent().remove()
-
})
如果只是用click，在手机上有没有反应，所以加了touchstart，之后功能可以实现
阅读(1695) | 评论(0) | 转发(0) |
