<!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. Oracle-SQL-按月统计自助终端交易量

    SQL实现的目标: 基本情况 现金交易情况 转账情况 转账交易情况(明细) 其它业务情况 交易量汇总 日均交易量 交易金额 绩效情况(万元) 支行名 支行号 所属网点 网点号 管理员帐户 管理员 终端 ...

  2. 国际化：Java平台下的Locale类

    Locale类有如下几个构造器: Locale(String language) Locale(String language, String country) Locale(String langu ...

  3. ajax跨域问题Access-Control-Allow-Origin

    Access control allow origin直译过来就是"访问控制允许同源",这是由于ajax跨域访问引起的.所谓跨域就是,在a.com域下,访问b.com域下的资源:出 ...

  4. Spring写第一个应用程序

    ref:http://www.importnew.com/13246.html 让我们用Spring来写第一个应用程序吧. 完成这一章要求: 熟悉Java语言 设置好Spring的环境 熟悉简单的Ec ...

  5. 《Node.js在CLI下的工程化体系实践》成都OSC源创汇分享总结

    背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同.常见的类型有组件类.活动类.基于React+redux的业务项目.RN项目.Node.j ...

  6. openlayer的凸包算法实现

    最近在要实现一个openlayer的凸多边形,也遇到了不小的坑,就记录一下 1.具体的需求: 通过在界面点击,获取点击是的坐标点,来绘制一个凸多边形. 2.思考过程: 1)首先,我们得先获取点击事件发 ...

  7. Quartz源码——Quartz调度器的Misfire处理规则（四）

    Quartz调度器的Misfire处理规则 调度器的启动和恢复中使用的misfire机制,还需细化! SimpleTrigger的misfire机制 默认的 Trigger.MISFIRE_INSTR ...

  8. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  9. Struts 关联DTD 文件

    Struts 的xml 文件在Eclipse 中  默认是不会有提示的. 但是我们可以关联DTD 文件, 这样子就可以出现如下的struts   提示了 1. 首先得先确保自己有Struts2 的Sr ...

  10. php基础运算符语句

    /* 多行注释 *///常用数据类型//int string double/float bool//变量的定义$a = 123;$b = "123";$c = '456';//$d ...