app左滑删除效果

百度云： 编程 --> 插件 -->  下载插件

              编程 -->  项目 -->  新功能

效果图：

html:

< body >
< header >
    < h2 >消息列表 </ h2 >
</ header >
< section  class= "list" >
    < ul  class= "list-ul" >
        < li  id= "li"  class= "list-li" >
            < div  class= "con" >
            测试手机端左滑1
            </ div >
            < div  class= "btn" >删除 </ div >
        </ li >
        < li  class= "list-li" >
            < div  class= "con" >
                测试手机端左滑2
            </ div >
            < div  class= "btn" >删除 </ div >
        </ li >
    </ ul >
</ section >

</body>

css:

*{  padding: 0;  margin: 0;  list-style:  none;}
header{  background:  #f7483b;  border-bottom:  1 px solid  #ccc}
header h2{  text-align:  center;  line-height:  54 px;  font-size:  16 px;  color:  #fff}
. list-ul{  overflow:  hidden}
. list-li{  line-height:  60 px;  border-bottom:  1 px solid  #fcfcfc;  position: relative;  color:  #666; text-indent:  20 px;
    background:  #f2f2f2;
    -webkit-transform:  translateX( 0 px);
}
. btn{  position:  absolute;  top:  0;  right: - 80 px;  text-align:  center;  background:  #ffcb20;  color:  #fff;  width:  80 px}

js:

< script >
    /*
    * 作者：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;

               //  取到transform值，同时去掉 translateX ，px,   最后结果就是： 0 ,-80

         }
          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)";
            }
         }

       })

   })

</ script >