滑动删除demo

<!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>





    
        1111111111111
        删除
    
    
        222222222222
        删除
    
    
        33333333
        删除

posted @ 2017-01-10 23:53 莺哥阅读(154) 评论(0) 收藏举报

刷新页面返回顶部

犹记惊鸿照影（JS）

滑动删除demo

公告