Front-end HTML h5 mobile phone-side imitation iOS left slide delete effect

Implementation features: Left slide list item (<li class= "Route-item" ></li>), the delete button (<div class= "Removejs" > Delete </div>) appears.

The code for the JS section is as follows:

1Window.addeventlistener (' Load ',function(){2     varInitx;3     varMoveX;4     varX = 0;5     varOBJX = 0;6     varwidth=$ (". Removejs"). width ();//the width of the button (Removejs modified to the classname of the button)7     varLiclassname= ". Route-item";//Li's classname (Route-item modified to Li's classname)8$ ("Body"). On ("Touchstart", Liclassname,function(event) {9         varobj= This;TenINITX = Event.targettouches[0].pagex; OneOBJX = (Obj.style.WebkitTransform.replace (/translatex\ (/g, ""). Replace (/px\)/g, "") * *; A         if(OBJX = = 0){ -$ ("Body"). On (' Touchmove ', Liclassname,function(event) { -                 //Event.preventdefault (); the                 varobj= This; -MoveX = Event.targettouches[0].pagex; -X = MoveX-Initx; -                     if(X > 0) { +Obj.style.WebkitTransform = "TranslateX (" + 0 + "px)"; -                     } +                     Else if(X < 0) { A                         varL =Math.Abs (X); atObj.style.WebkitTransform = "TranslateX (" +-L + "px)"; -                         if(l>width) { -L=width; -Obj.style.WebkitTransform = "TranslateX (" +-L + "px)"; -                         } -                     } in             }); -         } to         Else if(objx<0){ +$ ("Body"). On ("Touchmove", Liclassname,function(event) { -                 //Event.preventdefault (); the                 varobj= This; *MoveX = Event.targettouches[0].pagex; $X = MoveX-Initx;Panax Notoginseng                     if(X > 0) { -                         varr =-width +Math.Abs (X); theObj.style.WebkitTransform = "TranslateX (" + R + "px)"; +                         if(r>0){ AR=0; theObj.style.WebkitTransform = "TranslateX (" + R + "px)"; +                         } -                     } $                     Else{//Swipe left $Obj.style.WebkitTransform = "TranslateX (" +-width + "px)"; -                     } -             }); the         } -     })Wuyi$ ("Body"). On ("Touchend", Liclassname,function(event) { the         varobj= This; -OBJX = (Obj.style.WebkitTransform.replace (/translatex\ (/g, ""). Replace (/px\)/g, "") * *; Wu             if(OBJX&GT;-WIDTH/2) { -Obj.style.WebkitTransform = "TranslateX (" + 0 + "px)"; About}Else{ $Obj.style.WebkitTransform = "TranslateX (" +-width + "px)"; -             } -     }) -})

View Code

PS: In a real project, you just need to modify the following two lines of code:

var width=$ (". Removejs"). width ();
var liclassname= ". Route-item";

Front-end HTML h5 mobile phone-side imitation iOS left slide delete effect