<!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 <title>js侧滑显示删除按钮</title>

 <style>

 *{margin:0;padding:0;}

 body{font-size:.14rem;}

 li{list-style:none;}

 i{font-style:normal;}

 a{color:#393939;text-decoration:none;}

 .list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}

 .list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}

 .list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}

 .list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}

 .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}

 </style>

 <script>

 //计算根节点HTML的字体大小

 function resizeRoot(){

     var deviceWidth = document.documentElement.clientWidth,

         num = 750,

         num1 = num / 100;

     if(deviceWidth > num){

         deviceWidth = num;

     }

     document.documentElement.style.fontSize = deviceWidth / num1 + "px";

 }

 //根节点HTML的字体大小初始化

 resizeRoot();

 window.onresize = function(){

     resizeRoot();

 };

 </script>

 </head>

 <body>

 <section>

 <div class="list">

     <ul>

         <li><a href="#">侧滑显示删除按钮1<i>删除</i></a></li>

         <li><a href="#">侧滑显示删除按钮2<i>删除</i></a></li>

         <li><a href="#">侧滑显示删除按钮3<i>删除</i></a></li>

     </ul>

 </div>

 <script>

 //侧滑显示删除按钮

 var expansion = null; //是否存在展开的list

 var container = document.querySelectorAll('.list li a');

 for(var i = 0; i < container.length; i++){

     var x, y, X, Y, swipeX, swipeY;

     container[i].addEventListener('touchstart', function(event) {

         x = event.changedTouches[0].pageX;

         y = event.changedTouches[0].pageY;

         swipeX = true;

         swipeY = true ;

         if(expansion){   //判断是否展开，如果展开则收起

             expansion.className = "";

         }

     });

     container[i].addEventListener('touchmove', function(event){

         X = event.changedTouches[0].pageX;

         Y = event.changedTouches[0].pageY;

         // 左右滑动

         if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){

             // 阻止事件冒泡

             event.stopPropagation();

             if(X - x > 10){   //右滑

                 event.preventDefault();

                 this.className = "";    //右滑收起

             }

             if(x - X > 10){   //左滑

                 event.preventDefault();

                 this.className = "swipeleft";   //左滑展开

                 expansion = this;

             }

             swipeY = false;

         }

         // 上下滑动

         if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {

             swipeX = false;

         }

     });

 }

 </script>

 </body>

 </html>

移动自适应

 <script>

 //计算根节点HTML的字体大小

 function resizeRoot(){

     var deviceWidth = document.documentElement.clientWidth,

         num = 750,

         num1 = num / 100;

     if(deviceWidth > num){

         deviceWidth = num;

     }

     document.documentElement.style.fontSize = deviceWidth / num1 + "px";

 }

 //根节点HTML的字体大小初始化

 resizeRoot();

 window.onresize = function(){

     resizeRoot();

 };

 </script>

在实现的过程中，要注意父元素和子元素的一些样式，比如在父元素中设置box-sizing: border-box; 可以减少一些问题。

教程转载处：http://www.cnblogs.com/tnnyang/p/6429730.html

JS实现移动端购物车左滑删除功能的更多相关文章

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

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

  2. tableView左滑删除功能

    实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...

  3. js实现购物车左滑删除

    使用 js 和jquery动画实现购物车左滑,请引入jquery库,不然会报错哦! 首页编写页面,注意布局,滑动分成两部分,商品图片和信息放在一个布局,删除和移入收藏放在一起. 其中js用到了 tou ...

  4. 微信小程序左滑删除功能

    效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTou ...

  5. Vue 仿QQ左滑删除功能（非原创）

    非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...

  6. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

  7. Android ListView左滑删除、左滑自定义功能

    最近项目需要ListView左滑删除功能,搜集了很多资料发现了一个某一前辈写的库能很简单的实现这个功能,而且有源码,直接拿来使用了. 库名字叫做SwipeMenuListView,下面给大家演示一下使 ...

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

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

  9. 仿QQ列表左滑删除

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

随机推荐

  1. Spring03-jdbc

    1,Spring集成Jdbc,需要导入spring包和数据库驱动包,这里我们使用的是mysql驱动包 2,选择一个数据源(DBCP,C3P0),这里我们使用DBCP,需要导入DBCP驱动包 3,创建j ...

  2. Routing in ASP.NET Core

    .NET-Core Series Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error Handling in ...

  3. ngRepeat track by

    刚刚看见一篇文章讲述track by的功能的,大致记录如下: 1. ng-repeat="friend in friends" 一般不使用track by的情况下,每次刷新DOM, ...

  4. LINUX通过PXE自动部署系统

    原理介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP 协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的 ...

  5. tomcat部署项目的一点心得

    打包方式 eclipse  右键项目Export  选择WAR file 在选择将打包好的war 包存放的位置 放到tomcat中运行   : 首先将war包fang放到解压的tomcat中的weba ...

  6. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  7. 【Spring】高级装配

    前言 前面讲解了bean的核心装配技术,其可应付很多中装配情况,但Spring提供了高级装配技术,以此实现更为高级的bean装配功能. 高级装配 配置profile bean 将所有不同bean定义放 ...

  8. 移动APP测试方法总结

    移动APP测试,除了基础功能测试测试方法外,需要额外关注以下方面: 兼容性测试 流量测试 电量测试 弱网络测试 稳定性测试 安全测试 环境相关测试 兼容性测试 针对App通常会考虑这些方面: 1.操作 ...

  9. Linux用户和文件权限管理

    本文为原创文章,转载请标明出处 目录 用户管理 系统用户文件 添加用户 useradd 设置用户密码 passwd 删除用户 userdel 用户管理 usermod 用户组管理 系统用户组文件 添加 ...

  10. jvm的垃圾回收算法

    一.对象存活判断判断对象是否存活一般有两种方式:1.引用计数:每个对象有一个引用计数属性,新增一个引用时计数加1,引用释放时计数减1,计数为0时可以回收.此方法简单,无法解决对象相互循环引用的问题.2 ...