向左滑动 添加 删除按钮 效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>向左滑动删除效果</title> <style> *{ padding:0; margin:0; list-style: none;} .list-ul{ overflow: hidden } .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666; background: #f2f2f2; transform: translateX(0px); } .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 40px} .btn1{ right: -40px; color:red; background: #000; } </style> </head> <body> <div class="list"> <ul class="list-ul"> <li id="li" class="list-li"> <div class="con"> 测试一 </div> <div class="btn">取消</div> <div class="btn btn1">删除</div> </li> <li class="list-li"> <div class="con"> 测试二 </div> <div class="btn">取消</div> <div class="btn btn1">删除</div> </li> </ul> </div> <script src="jquery-3.0.0.js"></script> <script> $('.list-li').on('touchstart',function(event){ $(this).siblings('.list-li').css('transform','translateX(' + 0 + 'px)'); var list = $('.list-li'),initX=0,objX=0; event.preventDefault(); initX = event.targetTouches[0].pageX;//获取鼠标滑动前的位置 objX =(this.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;//获取当前元素的transform值 $('.list-li').on('touchmove',function(event){ event.preventDefault(); moveX = event.targetTouches[0].pageX;//获取鼠标滑动到的位置 X = moveX - initX; if(objX == 0){ if(X > 0){ $(this).css('transform','translateX(' + 0 + 'px)'); }else if(X < 0){ var num = Math.abs(X);//取绝对值 $(this).css('transform','translateX(' + -num + 'px)'); if(num > 80){ $(this).css('transform','translateX(' + -80 + 'px)'); } } }else if(objX < 0){ if(X > 0){ var l = -80 + Math.abs(X); if(l <= 0){ $(this).css('transform','translateX(' + l + 'px)'); }else if(l > 0){ $(this).css('transform','translateX(' + 0 + 'px)'); } }else{ $(this).css('transform','translateX(' + -80 + 'px)'); } } }) $('.list-li').on('touchend',function(event){ event.preventDefault(); objX =(this.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; if(objX>-40){ $(this).css('transform','translateX(' + 0 + 'px)'); }else{ $(this).css('transform','translateX(' + -80 + 'px)'); } }) }) </script> </body> </html>
原生js实现，对手机的支持效果较好
var btn=document.getElementById('btn').offsetWidth,li = document.getElementsByClassName('con'),lis = document.getElementsByClassName('list-li'),initx=0; var left = 0,r=0; for(var i=0;i<lis.length;i++){ move(lis[i]); lis[i].index = i } function move(list){ list.addEventListener('touchstart',function(e){ initx = e.targetTouches[0].pageX; // function siblings(elm) { // var a = []; // var p = elm.parentNode.children; // for(var i =0,pl= p.length;i<pl;i++) { // if(p[i] !== elm) a.push(p[i]); // } // return a; // } // var sib=siblings(e.target.parentNode); for(var i=0;i<lis.length;i++){ // sib[i].style.transform = 'translateX(' + 0 + 'px)'; if(list.index != i){ lis[i].style.transform = 'translateX(' + 0 + 'px)'; } } li = document.getElementsByClassName('list-li') if(left == ""){ left=0 }else{ left = list.style.transform.slice(11,-3); } // left = (list.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; if(left === 0){ list.addEventListener('touchmove',function(e){ var movex = e.targetTouches[0].pageX; var x = movex - initx; if(x<0){ list.style.transform = 'translateX(' + x + 'px)'; if(x<=-btn){ list.style.transform = 'translateX(' + -btn + 'px)'; } }else if(x>0){ list.style.transform = 'translateX(' + 0 + 'px)'; } },false); }else if(left < 0){ list.addEventListener('touchmove',function(e){ var movex = e.targetTouches[0].pageX; var x = movex - initx; if(x>0){ r = -btn + Math.abs(x); list.style.transform = 'translateX(' + r + 'px)'; if(r > 0){ list.style.transform = 'translateX(' + 0 + 'px)'; } }else{ list.style.transform = 'translateX(' + -btn + 'px)'; } },false); } list.addEventListener('touchend',function(){ left = (list.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; if(left>-40){ list.style.transform = 'translateX(' + 0 + 'px)'; }else{ list.style.transform = 'translateX(' + -btn + 'px)'; } },false) },false); var btn2=document.getElementById('btn'); btn2.addEventListener('click',function(){ alert('测试') },false) }
效果图：
