<!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. 建一座安全的“天空城” ——揭秘腾讯WeTest如何与祖龙共同挖掘手游安全漏洞

    作者:腾讯WeTest手游安全测试团队商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 <九州天空城3D>上线至今,长期稳定在APP Store畅销排行的前 ...

  2. Akka（26）： Stream：异常处理-Exception handling

    akka-stream是基于Actor模式的,所以也继承了Actor模式的“坚韧性(resilient)”特点,在任何异常情况下都有某种整体统一的异常处理策略和具体实施方式.在akka-stream的 ...

  3. 根据HttpServletRequest获取用户真实IP地址

    原因: 当我们通过request获取客户端IP时,自身服务器通常会为了保护信息或者负载均衡的目的,对自身服务器做反向代理.此时如果我们通过request.getRemoteAddr();可能获取到的是 ...

  4. 走进Node.js 之 HTTP实现分析

    作者:正龙(沪江Web前端开发工程师) 本文为原创文章,转载请注明作者及出处 上文"走进Node.js启动过程"中我们算是成功入门了.既然Node.js的强项是处理网络请求,那我们 ...

  5. 在MAC OS X中默认的Web共享目录

    在Mac OS X中可以很方便的通过开启"Web共享"启用Apache服务:设置方法如下: 打开"系统设置偏好(System Preferences)" -&g ...

  6. [js高手之路] html5新增的定时器requestAnimationFrame实战进度条

    在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解 ...

  7. 【bzoj2761】[JLOI2011]不重复数字

    给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 18 3 19 6 5 4. Inpu ...

  8. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  9. pycharm（windows）安装及其设置中文菜单

    pycharm(windows)安装及其设置中文菜单 1.下载 在官网(http://www.jetbrains.com/pycharm/download/#section=windows)进行下载 ...

  10. nodejs+express+mongoose无法获取数据库数据问题解决

    通过mongoose与mongodb进行操作.而mongoose是通过model来创建mongodb中对应的collection的,这样你通过如下的代码: mongoose.model('User', ...