JS實現左滑出現刪除按鈕

本文轉載自查看原文 2017-11-23 11:26 1400 js

 
         <!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >側滑顯示刪除按鈕1<i>刪除</i></a></li> 
        
           <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >側滑顯示刪除按鈕2<i>刪除</i></a></li> 
        
           <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >側滑顯示刪除按鈕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>

免責聲明！

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

猜您在找 HTML5+JS+CSS簡單的實現左滑出現刪除菜單，類似微信刪除聊天框，代碼完整 iOS開發——UI進階篇（四）tableView的全局刷新，局部刷新，左滑操作，左滑出現更多按鈕，進入編輯模式，批量刪除，自定義批量刪除左右滑動事件，左划出現刪除按鈕，右滑隱藏 Android ListView實現單擊item出現刪除按鈕以及滑動出現刪除按鈕 H5左滑刪除JS插件 Android -- RecyclerView實現左滑刪除實現一個左滑刪除功能點擊按鈕出現60秒倒計時，JS（按鈕） CSS3側欄滑出簡單實現點擊按鈕出現60秒倒計時js代碼