H5左滑删除JS插件

 <script type="text/javascript">
     /**
       * zepto插件：向左滑动删除动效
       * 使用方法：$('.itemWipe').touchWipe({itemDelete: '.item-delete'});
       * 参数：itemDelete  删除按钮的样式名
       */
      ;
      (function($) {
        $.fn.touchWipe = function(option) {
          var defaults = {
            itemDelete: '.item-delete', //删除元素
          };
          var opts = $.extend({}, defaults, option); //配置选项
          var delWidth = $(opts.itemDelete).width();

          var initX; //触摸位置X
          var initY; //触摸位置Y
          var moveX; //滑动时的位置X
          var moveY; //滑动时的位置Y
          var X = 0; //移动距离X
          var Y = 0; //移动距离Y
          var flagX = 0; //是否是左右滑动 0为初始，1为左右，2为上下，在move中设置，在end中归零
          var objX = 0; //目标对象位置

          $(this).on('touchstart', function(event) {
            console.log('start..');
            var obj = this;
            initX = event.targetTouches[0].pageX;
            initY = event.targetTouches[0].pageY;
            console.log(initX + ':' + initY);
            objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
            console.log (objX);
            if (objX == 0) {
              $(this).on('touchmove', function(event) {

                // 判断滑动方向，X轴阻止默认事件，Y轴跳出使用浏览器默认
                if (flagX == 0) {
                  setScrollX(event);
                  return;
                } else if (flagX == 1) {
                  event.preventDefault();
                } else {
                  return;
                }

                var obj = this;
                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 > delWidth) {
                    l = delWidth;
                    obj.style.WebkitTransform = "translateX(" + -l + "px)";
                  }
                }
              });
            } else if (objX < 0) {
              $(this).on('touchmove', function(event) {

                // 判断滑动方向，X轴阻止默认事件，Y轴跳出使用浏览器默认
                if (flagX == 0) {
                  setScrollX(event);
                  return;
                } else if (flagX == 1) {
                  event.preventDefault();
                } else {
                  return;
                }

                var obj = this;
                moveX = event.targetTouches[0].pageX;
                X = moveX - initX;
                if (X >= 0) {
                  var r = -delWidth + 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(" + -delWidth + "px)";
                }
              });
            }
          })

          //结束时判断，并自动滑动到底或返回
          $(this).on('touchend', function(event) {
            var obj = this;
            objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
           if (objX > -delWidth / 2) {
             obj.style.transition = "all 0.2s";
             obj.style.WebkitTransform = "translateX(" + 0 + "px)";
             obj.style.transition = "all 0";
             objX = 0;
           } else {
             obj.style.transition = "all 0.2s";
             obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
             obj.style.transition = "all 0";
             objX = -delWidth;
           }
           flagX = 0;
         })

         //设置滑动方向
         function setScrollX(event) {
           moveX = event.targetTouches[0].pageX;
           moveY = event.targetTouches[0].pageY;
           X = moveX - initX;
           Y = moveY - initY;

           if (Math.abs(X) > Math.abs(Y)) {
             flagX = 1;
           } else {
             flagX = 2;
           }
           return flagX;
         }

         //链式返回
         return this;
       };

     })(Zepto);
 </script>

现在滑动a标签，对是a标签，把a标签跟删除按钮分开，不然点击删除会触发li的点击事件：

效果图：

HTML结构：

 <ul>
     <li>
         <a href="www.baidu.com">这是滑动内容</a>
         <div class="item-delete"></div>
     </li>
     <li>
         <a href="www.baidu.com">这是滑动内容</a>
         <div class="item-delete"></div>
     </li>
 </ul>

其它具体样式就不一一展示，就写按钮样式：

CSS样式：

 .item-delete {
     position: absolute;
     top:;
     right: -60px;
     background: #c93535;
     color: #fff;
     width: 60px;
     height: 100%;
     text-align: center;
     display: inline-block;
     line-height: 72px;
     font-size: 12px;
     border: 1px solid #fff;
     z-index:;
 }
 .item-delete:before {
     content: '删除';
     color: #fff;
 }
 .ul {
     overflow: hidden;
 }

最终效果可以参考：

全车品保养选择车型效果

参考文章地址：

https://www.cnblogs.com/woodk/p/5360494.html