<!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. 虚拟WEB目录的映射原理

    一个文件系统目录可以被映射成为多个虚拟WEB目录,虚拟WEB目录名称可以是多级目录结构的形式,tomca按照最长路径匹配原则处理请求的URL 设置WEB站点的根目录: <Host>元素的a ...

  2. JS之脚本延迟

    自从开了博客,我就一下班回来匆匆吃完饭门一关等一开电脑一打开匆匆的研究东西,以至于朋友们都怀疑我是不是都得了自闭症 其实因为我有恐惧心理怕自己的技术哪天跟不上社会了,说到技术我觉得技术不求越新越好,但 ...

  3. NavigationController的返回按钮自定义

    假设需求时这样: NavigationController下有2个视图,从A视图会Push到B视图,默认情况下,当显示视图B时,视图B的导航bar上会出现返回按钮,按钮标题文字默认为A视图的title ...

  4. 记XDCTF的misc之旅---base64隐写

    bWFpbigpe2ludCBpLG5bXT17KCgoMSA8PDEpPDwgKDE8PDEpPDwoMTw8Cm==ICAgICAgIDEpPDwoMTw8KDE+PjEpKSkrKCgxPDwx ...

  5. hdu3065 ac自动机

    病毒侵袭持续中 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  6. Dubbo服务接口的设计原则

    1.接口粒度 1.1 服务接口尽可能大粒度,每个服务方法应代表一个功能,而不是某功能的一个步骤,否则将面临分布式事务问题,Dubbo暂未提供分布式事务支持.同时可以减少系统间的网络交互. 1.2 服务 ...

  7. Python文件读写模式

    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在.可读,可写,可追加. w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. w+ 打 ...

  8. NOIP 11.01 应试记录

    快排代码 void quicksort(int left,int right) { int u,j,t,temp; if(letf>right) return; temp=a[left]; i= ...

  9. binary

    模块说明 函数经过优化,比等价Erlang实现(比如位语法)更快,更节省内存 大部分可用位语法等价实现 模块的实现根据EEP(Erlang Enhancement Proposal)31 模块只处理面 ...

  10. mysqldumpslow -- 分析慢查询日志

    格式:mysqldumpslow [选项] 慢查询日志路径 选项: -s   排序方式,可选值有c(记录次数).t(查询时间).l(锁定时间).r(返回记录).a(平均) -t    显示的记录数 - ...