JS实现移动端购物车左滑删除功能

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 <title>js侧滑显示删除按钮</title>
 7 <style>
 8 *{margin:0;padding:0;}
 9 body{font-size:.14rem;}
10 li{list-style:none;}
11 i{font-style:normal;}
12 a{color:#393939;text-decoration:none;}
13 .list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
14 .list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}
15 .list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
16 .list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
17 .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
18 </style>
19 <script>
20 //计算根节点HTML的字体大小
21 function resizeRoot(){
22     var deviceWidth = document.documentElement.clientWidth,
23         num = 750,
24         num1 = num / 100;
25     if(deviceWidth > num){
26         deviceWidth = num;  
27     }
28     document.documentElement.style.fontSize = deviceWidth / num1 + "px";
29 }
30 //根节点HTML的字体大小初始化
31 resizeRoot();
32 
33 window.onresize = function(){
34     resizeRoot();
35 };
36 </script>
37 </head>
38 <body>
39 <section>
40 <div class="list">
41     <ul>
42         <li><a href="#">侧滑显示删除按钮1<i>删除</i></a></li>
43         <li><a href="#">侧滑显示删除按钮2<i>删除</i></a></li>
44         <li><a href="#">侧滑显示删除按钮3<i>删除</i></a></li>
45     </ul>
46 </div>
47 <script>
48 //侧滑显示删除按钮
49 var expansion = null; //是否存在展开的list
50 var container = document.querySelectorAll('.list li a');
51 for(var i = 0; i < container.length; i++){    
52     var x, y, X, Y, swipeX, swipeY;
53     container[i].addEventListener('touchstart', function(event) {
54         x = event.changedTouches[0].pageX;
55         y = event.changedTouches[0].pageY;
56         swipeX = true;
57         swipeY = true ;
58         if(expansion){   //判断是否展开，如果展开则收起
59             expansion.className = "";
60         }        
61     });
62     container[i].addEventListener('touchmove', function(event){
63         
64         X = event.changedTouches[0].pageX;
65         Y = event.changedTouches[0].pageY;        
66         // 左右滑动
67         if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
68             // 阻止事件冒泡
69             event.stopPropagation();
70             if(X - x > 10){   //右滑
71                 event.preventDefault();
72                 this.className = "";    //右滑收起
73             }
74             if(x - X > 10){   //左滑
75                 event.preventDefault();
76                 this.className = "swipeleft";   //左滑展开
77                 expansion = this;
78             }
79             swipeY = false;
80         }
81         // 上下滑动
82         if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
83             swipeX = false;
84         }        
85     });
86 }
87 </script>
88 </body>
89 </html>

移动自适应

 1 <script>
 2 //计算根节点HTML的字体大小
 3 function resizeRoot(){
 4     var deviceWidth = document.documentElement.clientWidth,
 5         num = 750,
 6         num1 = num / 100;
 7     if(deviceWidth > num){
 8         deviceWidth = num;  
 9     }
10     document.documentElement.style.fontSize = deviceWidth / num1 + "px";
11 }
12 //根节点HTML的字体大小初始化
13 resizeRoot();
14 
15 window.onresize = function(){
16     resizeRoot();
17 };
18 </script>

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

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