<!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. YTU 2598: 编程题B-小平智斗自动售货机

    2598: 编程题B-小平智斗自动售货机 时间限制: 1 Sec  内存限制: 128 MB 提交: 268  解决: 69 题目描述 LYH自动售货机在销售商品时,具有自动找钱功能.但是找零的最小单 ...

  2. YTU 2811: 打鱼还是晒网

    2811: 打鱼还是晒网 时间限制: 1 Sec  内存限制: 128 MB 提交: 192  解决: 150 题目描述 中国有句俗话"三天打鱼,两天晒网".小王从2000年的1月 ...

  3. 配置RabbitMQ远程访问

    本文参考自:http://flashing.iteye.com/blog/1797531 1.如果远程客户端网络状况不是太好,比如adsl什么的,那么一定在客户端打开requstedHeartbeat ...

  4. 并不对劲的hdu4777

    Long long ago, there was an ancient rabbit kingdom in the forest. Every rabbit in this kingdom was n ...

  5. CentOS 6 网络设置修改 指定IP地址 DNS 网关

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 路由器网关:192.168.1.1 步骤: 1.查看网络MAC地址 [ro ...

  6. Educational Codeforces Round 19 E. Array Queries(暴力)(DP)

    传送门 题意 给出n个数,q个询问,每个询问有两个数p,k,询问p+k+a[p]操作几次后超过n 分析 分块处理,在k<sqrt(n)时,用dp,大于sqrt(n)用暴力 trick 代码 #i ...

  7. python 面向对象四 继承和多态

    一.继承 class Animal(object): def run(self): print('Animal is running...') class Dog(Animal): def run(s ...

  8. bzoj 2257: [Jsoi2009]瓶子和燃料【裴蜀定理+gcd】

    裴蜀定理:若a,b是整数,且gcd(a,b)=d,那么对于任意的整数x,y,ax+by都一定是d的倍数,特别地,一定存在整数x,y,使ax+by=d成立. 所以最后能得到的最小燃料书就是gcd,所以直 ...

  9. bzoj 4137 [FJOI2015]火星商店问题【CDQ分治+可持久化trie】

    其实我不太清楚这个应该叫CDQ分治还是整体二分 参考:http://blog.csdn.net/lvzelong2014/article/details/78688727 一眼做法是线段树套可持久化t ...

  10. 进击的Python【第十一章】：消息队列介绍、RabbitMQ&Redis的重点介绍与简单应用

    消息队列介绍.RabbitMQ.Redis 一.什么是消息队列 这个概念我们百度Google能查到一大堆文章,所以我就通俗的讲下消息队列的基本思路. 还记得原来写过Queue的文章,不管是线程queu ...