<!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. SoapUI中Code多行显示设置

    你们的SoapUI 有设置下面的选项吗? Before adding your project, we recommend that you enable the following ReadyAPI ...

  2. bzoj 1898

    1898: [Zjoi2005]Swamp 沼泽鳄鱼 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1197  Solved: 661[Submit][S ...

  3. 利用HashMap存取对象并获得键值集合

    1.HashMap 已实现的接口 Serializable, Cloneable, Map<K,V> 2.方法摘要 相关代码 /** * * @param ha * write(HashM ...

  4. Java多线程系列八——volatile和ThreadLocal

    参考资料: http://ifeve.com/java-memory-model-4/ http://www.infoq.com/cn/articles/java-memory-model-1 htt ...

  5. Mysql数据库基础操作

    Mysql数据库基础操作 在mysql数据库中开启使用tab键补全功能 1)修改主配置文件/etc/mysql/my.cnf(mysql和mariadb目录有些不同) vim /etc/mysql/m ...

  6. Linux 软链接 硬链接 ln命令（简约说明版）

    注意:路径使用绝对路径!! 解决方法: 当我们需要在不同的目录下用到同一个文件时,会用到以下命令. 命令:ln 作用:为某一个文件在另外一个位置建立一个同步的链接 语法:ln ［option］ 源文件 ...

  7. 洛谷P2082 区间覆盖(加强版)（珂朵莉树）

    传送门 虽然是黄题而且还是一波离散就能解决的东西 然而珂朵莉树还是很好用 相当于一开始区间全为0,然后每一次区间赋值,问最后总权值 珂朵莉树搞一搞就好了 //minamoto #include< ...

  8. flask请求访问数据

    flask请求访问数据 在flask框架中,访问请求数据由全局的request对象来提供,在flask框架中,request对象具有 全局作用域: from flask import request ...

  9. 编译原理 LR分析（主要是LR（0）分析）

    一.LR分析的基本原理 1.LR分析的基本思想 LR方法的基本思想就是,在规范归约的过程中,一方面要记住已移进和归约出的整个字符串,也就是说要记住历史:一方面能够根据所用的产生式的推测未来可能碰到的输 ...

  10. 题解报告：hdu 2544 最短路

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2544 Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t ...