<!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. JVM菜鸟进阶高手之路十（基础知识开场白）

    转载请注明原创出处,谢谢! 最近没有什么实战,准备把JVM知识梳理一遍,先以开发人员的交流来谈谈jvm这块的知识以及重要性,依稀记得2.3年前用solr的时候老是经常oom,提到oom大家应该都不陌生 ...

  2. Redis学习笔记之一 ： 配置redis

    Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...

  3. 【Kafka】操作命令

    生产者 ./kafka-console-producer.sh --broker-list --topic norm 消费者 ./kafka-console-consumer.sh --zookeep ...

  4. poj1014二进制优化多重背包

    Dividing Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 53029   Accepted: 13506 Descri ...

  5. spring框架总结（01）

    1.spring是什么? sprint其实就是一个开源框架,是于2003年兴起的一个轻量级的java开发框架,是有Road Johnson创建的,简单的来说spring是一个分层的JavaSE/EE( ...

  6. Java总结篇：Java多线程

    Java总结篇系列:Java多线程 多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的. 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: ...

  7. Vue使用总结

    好久没更新博客,确实是自己已经懒癌晚期,最近毕业刚工作3个月,公司开发一直在用Vue,自己个人也比较喜欢这个框架,今天就对自己学习到和用到的知识点作一些总结,希望能帮到大家. Vue 知道Vue也一定 ...

  8. SQL Server Compact/SQLite Toolbox 使用

    最近一个嵌入式的数据库用的SqlCe 需要导入到Sqlite, 网上查到了这个工具--SQL Server Compact/SQLite Toolbox.但是在使用的时候遇到了一点小曲折,记录下来给需 ...

  9. 将图标LOGO之类的图形图像转换成字体调用方法大全

    借鉴百度对此标题的评价: 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些优势呢. 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小.一旦图标字体加载 ...

  10. javascript 三种弹出对话框

    第一种:alert()方法 第二种:confirm()方法 返回一个布尔值,根据返回的值可以执行相应操作. 第三种: prompt()方法 返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面 ...