滑动删除demo

时间：2017-01-11 07:39:01 阅读：162 评论：0 收藏：0 [点我收藏+]

标签：com http pos set height default doc margin button

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script><title></title>
<style>
*{margin:0;padding:0;}
ul {overflow: hidden;}
ul li{list-style-type: none;}
li{
position:relative;
line-height:30px;
border-bottom:1px solid #ddd;
background-color:#ccc;
}
.con{width:100%;}
.del{
position: absolute;
top: 0;
right: -80px;
text-align: center;
background: #ffcb20;
color: #fff;
width: 80px;
}
</style>
</head>
<body >
<ul>
<li class="list">
<div class="con">1111111111111</div>
<div class="del">删除</div>
</li>
<li class="list">
<div class="con">222222222222</div>
<div class="del">删除</div>
</li>
<li class="list">
<div class="con">33333333</div>
<div class="del">删除</div>
</li>
</ul>
<script>
window.onload=function(){
var Init= 0,Endnit,objX;
var jiange;
window.addEventListener(‘touchstart‘,function(e){
e.preventDefault();
var obj = e.target.parentNode;
if(obj.className=="list"){
Init= e.targetTouches[0].pageX;
objX=(obj.style.WebkitTransform.replace(/translateX\(/,‘‘).replace(/px\)/,‘‘))*1;
}
if(objX==0){
window.addEventListener(‘touchmove‘,function(e){
e.preventDefault();
var obj = e.target.parentNode;
if(obj.className=="list"){
Endnit=e.targetTouches[0].pageX;
jiange=Endnit-Init;
if(jiange<0&&jiange>-80) {
obj.style.WebkitTransform=‘translateX(‘+jiange+‘px)‘;
}else if(jiange<-80){
obj.style.WebkitTransform=‘translateX(-80px)‘;
}
}
})
}else{
window.addEventListener(‘touchmove‘,function(e){
e.preventDefault();
var obj = e.target.parentNode;
if(obj.className=="list"){
Endnit=e.targetTouches[0].pageX;
jiange=Endnit-Init;
console.log(objX+jiange)
if(80-jiange>0) {
obj.style.WebkitTransform=‘translateX(‘+(-(80-jiange))+‘px)‘;
}else if(jiange>80){
obj.style.WebkitTransform=‘translateX(0px)‘;
}
}
})
}
window.addEventListener(‘touchend‘,function(e){
e.preventDefault();
var obj = e.target.parentNode;
objX=(obj.style.WebkitTransform.replace(/translateX\(/,‘‘).replace(/px\)/,‘‘))*1;
if(objX>-40){
obj.style.WebkitTransform=‘translateX(0px)‘;
}else{
obj.style.WebkitTransform=‘translateX(-80px)‘;
}
})
})
}
</script>
</body>
</html>

滑动删除demo

标签：com http pos set height default doc margin button

原文地址：http://www.cnblogs.com/heyinwangchuan/p/6271352.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行