<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

  <title>向左滑动删除</title>

  <style>

  .list-ul {

    overflow: hidden

  }

  .list-li {

    line-height: 60px;

    border-bottom: 1px solid #fcfcfc;

    position: relative;

    padding: 0 12px;

    color: #666;

    background: #f2f2f2;

    -webkit-transform: translateX(0px);

  }

  .list-btn {

    position: absolute;

    top: 0;

    right: -80px;

    text-align: center;

    background: #fe3837;

    color: #fff;

    width: 80px

  }

  </style>

  <script>

  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;

      }

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

          objX = 0;

        } else {

          obj.style.WebkitTransform = "translateX(" + -80 + "px)";

          objX = -80;

        }

      }

    })

  })

  </script>

</head>

<body>

  <section class="list">

    <ul class="list-ul">

      <li class="list-li">

        <div >

          哈号是看技术大家啥哈哈哈哈

        </div>

        <div class="list-btn">删除</div>

      </li>

    </ul>

  </section>

</body>

</html>

js 类似于移动端购物车删除，左移动删除的更多相关文章

  1. JS实现移动端购物车左滑删除功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 写一个js向左滑动删除 交互特效的插件——Html5 touchmove

    需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

  3. 【前端】jQuery移动端左滑删除

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/left_slide_menu.html <!doctype html> <html> &l ...

  4. 基于touch.js 左滑删除功能

    左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. H5左滑删除JS插件

    <script type="text/javascript"> /** * zepto插件:向左滑动删除动效 * 使用方法:$('.itemWipe').touchWi ...

  6. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

  7. 使用zepto实现QQ消息左滑删除效果

    有这样一个需求: 1. 有一个列表,将每一个列表项左滑动出现删除按钮: 2. 右滑动隐藏删除按钮: 3. 点击这个删除按钮删除该列表项. 完成以后的效果: 这是微信网页端的页面,使用的是 zepto ...

  8. Android开发学习之路-PopupWindow和仿QQ左滑删除

    这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...

  9. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...

随机推荐

  1. Fibonacci数的后9位

    import java.math.*; import java.util.*; public class Main{ /** * @param args */ public static void m ...

  2. 【monkey】

    在Android文件系统中的存放路径是:/system/framework/monkey.jarMonkey.jar 程序是由一个名为“monkey”的Shell脚本来启动执行,shell脚本在And ...

  3. python 判断是否为有效域名

    import re pattern = re.compile( r'^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|' r'([a-zA-Z]{1}[0-9]{1}) ...

  4. js bind es5函数柯里化

    绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...

  5. winform 窗体设置成无边框、可拖拽、四周圆角

    最近做一个及时通讯系统的登录界面,现在将界面用到的无边框.可拖拽.四周圆角的方法分享如下: 1.无边框的窗体: 把FormBorderStyle的属性设置为none 2.可拖拽:private Poi ...

  6. (转) SQL Server中 ldf 文件过大的解决方法

    原文地址:http://blog.itpub.net/35489/viewspace-616459/ 在SQL Server中经常遇到事务日志变大的情况,除了将数据库设置为“自动收缩”外,还可以使用下 ...

  7. Ruby Regexp类

    正则表达(Regexp)类 更新:2017/06/18 改变[]集合的表格大小 80% ---> 100%  定义 正则表达: 和字符串匹配的模式(pattern)的写法 正则表达(Regexp ...

  8. IE兼容之中文汉字请求乱码-network

    IE兼容之中文汉字请求乱码 IE控制台报错: IE网络报错: 解决方法: encodeURI('--- @ -- 子卿 -'); // "---%20@%20--%20%E5%AD%90%E ...

  9. Linux基本命令—mkfs/mount/umount/wget/yes/make/passwd

    mkfs:用来在特定的分区建立Linux文件系统,是make filesystem的缩写. 例子:mkfs .ext3 /dev/mmcblk0p1      //把该设备格式化成ext3文件系统 m ...

  10. [转]POJ WA/RE指南

    "POJ上头的题都是数学题",也不知道是那个家伙胡诌的--但是POJ的要求就是算法通过了也不让你AC.下面本人就这560题的经验,浅谈一下WA/RE了怎么办.  以下内容是扯淡-- ...