<!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. mysql08---优化01

    Mysql数据库的优化技术 对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引(什么都不写).主键索引(有一个主键 ...

  2. lucene DocValues——没有看懂

    前言: 在Lucene4.x之后,出现一个重大的特性,就是索引支持DocValues,这对于广大的solr和elasticsearch用户,无疑来说是一个福音,这玩意的出现通过牺牲一定的磁盘空间带来的 ...

  3. 并不对劲的bzoj5340:loj2552:uoj399:p4564: [Ctsc2018]假面

    题目大意 有\(n\)(\(n\leq200\))个非负整数\(m_1,m_2,...,m_n\)(\(\forall i\in[1,n],m_i\leq100\)),有\(q\)(\(q\leq2* ...

  4. 设计模式-COMMOND PATTERN (ACTIVE OBJECT PATTERN是一种特殊的COMMOND PATTERN)

    复用控制逻辑. 理解方式:Controller 获取到Light TeleVision Computer中的一个的对像,通过Icommond接口作用于它. ACTIVE OBJECT模式: class ...

  5. 版本控制系统Git

    常用的版本控制系统有VSS.SVN.CVS等等,Git是最近几年使用得比较多的分布式版本控制系统,存在即合理,Git的出现总有它出现的理由,以前的版本控制系统肯定有一些不足的地方,所以才出现了Git. ...

  6. bzoj 1025: [SCOI2009]游戏【数学+dp】

    很容易发现行数就是lcm环长,也就是要求和为n的若干数lcm的个数 有结论若p1^a1+p2^a2+...+pm^am<=n,则ans=p1^a1p2^a2..*pm^am是n的一个可行答案.( ...

  7. [App Store Connect帮助]七、在 App Store 上发行（1）App 发行流程概述

    在 App Store 上发行 App 的一般流程如下. 第 1 步:选择您的构建版本 每个 App 都可以有多个版本,且每个版本也可以有多个构建版本.若要在 App Store 上发行您的 App, ...

  8. .Net Core之Configuration

    ASP.NET CORE 中自动集成了应用配置,支持从以下 源 处获取配置键值对 命令行 环境变量 内存 文件配置 其中文件配置是我们最常用的方式,默认文件是.json的json格式文件,摒弃了以往. ...

  9. yml文件教程

    地址:http://www.ruanyifeng.com/blog/2016/07/yaml.html 原来三个横线(---)是用来区分多个文件的,像下面就是指定了两个配置. spring: appl ...

  10. iOS NSDictionary <--> NSString(JSON) in Objc

    NSDictionary --> NSString + (NSString*)stringINJSONFormatForObject:(id)obj { NSData *jsonData = [ ...