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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM