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