html5左滑编辑删除,html5仿安卓app左滑动删除效果

【实例简介】

【实例截图】

【核心代码】

手机侧滑事件

*{ 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}

/*

* 作者：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)";

}

}

})

})

消息列表

• 你的快递到了，请到楼下签收

  删除

• 哇，你在干嘛，快点来啊就等你了

  删除