前端 html h5 移動端 手機端 仿ios左滑刪除效果

標籤：art   img   div   tar   項目   function   target   splay   http   

實現功能：左滑清單項目（<li class="route-item" ></li>），出現刪除按鈕(<div class="removeJs">刪除</div>)。

js部分的代碼如下：

 1 window.addEventListener(‘load‘,function(){ 2     var initX; 3     var moveX; 4     var X = 0; 5     var objX = 0; 6     var width=$(".removeJs").width();//按鈕的寬度(removeJs修改為按鈕的className) 7     var liClassName=".route-item";//li的className(route-item修改為li的className) 8     $("body").on("touchstart",liClassName,function (event) { 9         var obj=this;10             initX = event.targetTouches[0].pageX;11             objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;12         if( objX == 0){13             $("body").on(‘touchmove‘,liClassName,function(event) {14                 // event.preventDefault();15                 var obj=this;16                     moveX = event.targetTouches[0].pageX;17                     X = moveX - initX;18                     if (X > 0) {19                         obj.style.WebkitTransform = "translateX(" + 0 + "px)";20                     }21                     else if (X < 0) {22                         var l = Math.abs(X);23                         obj.style.WebkitTransform = "translateX(" + -l + "px)";24                         if(l>width){25                             l=width;26                             obj.style.WebkitTransform = "translateX(" + -l + "px)";27                         }28                     }29             });30         }31         else if(objX<0){32             $("body").on("touchmove",liClassName,function (event) {33                 // event.preventDefault();34                 var obj=this;35                     moveX = event.targetTouches[0].pageX;36                     X = moveX - initX;37                     if (X > 0) {38                         var r = -width + Math.abs(X);39                         obj.style.WebkitTransform = "translateX(" + r + "px)";40                         if(r>0){41                             r=0;42                             obj.style.WebkitTransform = "translateX(" + r + "px)";43                         }44                     }45                     else {     //向左滑動46                         obj.style.WebkitTransform = "translateX(" + -width + "px)";47                     }48             });49         }50     })51     $("body").on("touchend",liClassName,function (event) {52         var obj=this;53             objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;54             if(objX>-width/2){55                 obj.style.WebkitTransform = "translateX(" + 0 + "px)";56             }else{57                 obj.style.WebkitTransform = "translateX(" + -width + "px)";58             }59     })60 })

View Code

ps：實際項目中，只需修改如下兩行代碼即可：

var width=$(".removeJs").width();
var liClassName=".route-item";

 

前端 html h5 移動端 手機端 仿ios左滑刪除效果