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