이 글에서는 주로 QQ를 모방한 js에서 연락처를 왼쪽으로 밀고 삭제 버튼을 밀어내는 작업, 즉 인터랙티브 효과를 삭제하기 위해 왼쪽으로 밀기 위한 js 플러그인을 작성하는 방법을 소개합니다. 관심 있는 친구들은 이 글을 참고하세요
QQ의 연락처 작업과 유사한 작업을 구현하는 예를 알려드리겠습니다. 왼쪽으로 슬라이드하고 삭제 버튼을 슬라이드 아웃하세요. 반 이상 슬라이드되었을 때 놓으면 자동으로 아래쪽으로 슬라이드되며, 반 미만일 때 놓으면 원래 위치로 돌아갑니다.
순수한 js 구현
h5 touchmove 및 기타 이벤트를 사용하고 js를 사용하여 CSS3 번역 속성을 동적으로 변경하여 애니메이션 효과를 얻습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>html5向左滑动删除特效</title> <style> * { padding: 0; margin: 0; list-style: none; } header { background: #f7483b; border-bottom: 1px solid #ccc } header h2 { text-align: center; line-height: 54px; font-size: 16px; color: #fff } .list-ul { overflow: hidden } .list-li { line-height: 60px; border-bottom: 1px solid #fcfcfc; position: relative; padding: 0 12px; color: #666; background: #f2f2f2; -webkit-transform: translateX(0px); } .btn { position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px } </style> <script> /* * 描述:html5苹果手机向左滑动删除特效 */ window.addEventListener('load', function() { var initX; //触摸位置 var moveX; //滑动时的位置 var X = 0; //移动距离 var objX = 0; //目标对象位置 window.addEventListener('touchstart', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { initX = event.targetTouches[0].pageX; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; } if (objX == 0) { window.addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; } else if (X < 0) { var l = Math.abs(X); obj.style.WebkitTransform = "translateX(" + -l + "px)"; if (l > 80) { l = 80; obj.style.WebkitTransform = "translateX(" + -l + "px)"; } } } }); } else if (objX < 0) { window.addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { var r = -80 + Math.abs(X); obj.style.WebkitTransform = "translateX(" + r + "px)"; if (r > 0) { r = 0; obj.style.WebkitTransform = "translateX(" + r + "px)"; } } else { //向左滑动 obj.style.WebkitTransform = "translateX(" + -80 + "px)"; } } }); } }) window.addEventListener('touchend', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; if (objX > -40) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; objX = 0; } else { obj.style.WebkitTransform = "translateX(" + -80 + "px)"; objX = -80; } } }) }) </script> </head> <body> <header> <h2>消息列表</h2> </header> <section class="list"> <ul class="list-ul"> <li id="li" class="list-li"> <p class="con"> 你的快递到了,请到楼下签收 </p> <p class="btn">删除</p> </li> <li class="list-li"> <p class="con"> 哇,你在干嘛,快点来啊就等你了 </p> <p class="btn">删除</p> </li> </ul> </section> </body> </html>
zepto 플러그인으로 제작
실제 프로젝트에서는 이 기능을 여러 곳에서 사용할 수 있습니다. 이제 나중에 쉽게 사용할 수 있도록 이 기능을 zepto 플러그인으로 만들어 보겠습니다.
이 플러그인에서는 이 기능만 구현한 다음 매개변수(삭제 버튼의 스타일 이름)를 전달하여 프로그램이 쉽게 재사용할 수 있도록 js에서 필요한 슬라이딩 거리를 계산하도록 합니다.
zepto.touchWipe.js
/** * zepto插件:向左滑动删除动效 * 使用方法:$('.itemWipe').touchWipe({itemDelete: '.item-delete'}); * 参数:itemDelete 删除按钮的样式名 */ ; (function($) { $.fn.touchWipe = function(option) { var defaults = { itemDelete: '.item-delete', //删除元素 }; var opts = $.extend({}, defaults, option); //配置选项 var delWidth = $(opts.itemDelete).width(); var initX; //触摸位置 var moveX; //滑动时的位置 var X = 0; //移动距离 var objX = 0; //目标对象位置 $(this).on('touchstart', function(event) { event.preventDefault(); var obj = this; initX = event.targetTouches[0].pageX; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; if (objX == 0) { $(this).on('touchmove', function(event) { event.preventDefault(); var obj = this; moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; } else if (X < 0) { var l = Math.abs(X); obj.style.WebkitTransform = "translateX(" + -l + "px)"; if (l > delWidth) { l = delWidth; obj.style.WebkitTransform = "translateX(" + -l + "px)"; } } }); } else if (objX < 0) { $(this).on('touchmove', function(event) { event.preventDefault(); var obj = this; moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { var r = -delWidth + Math.abs(X); obj.style.WebkitTransform = "translateX(" + r + "px)"; if (r > 0) { r = 0; obj.style.WebkitTransform = "translateX(" + r + "px)"; } } else { //向左滑动 obj.style.WebkitTransform = "translateX(" + -delWidth + "px)"; } }); } }) $(this).on('touchend', function(event) { event.preventDefault(); var obj = this; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; if (objX > -delWidth / 2) { obj.style.transition = "all 0.2s"; obj.style.WebkitTransform = "translateX(" + 0 + "px)"; obj.style.transition = "all 0"; objX = 0; } else { obj.style.transition = "all 0.2s"; obj.style.WebkitTransform = "translateX(" + -delWidth + "px)"; obj.style.transition = "all 0"; objX = -delWidth; } }) //链式返回 return this; }; })(Zepto);
touchWipe.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>html5向左滑动删除特效</title> <style> *{ padding:0; margin:0; list-style: none;} header{ background: #f7483b; border-bottom: 1px solid #ccc} header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff} .list-ul{ overflow: hidden} .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666; background: #f2f2f2; -webkit-transform: translateX(0px); } .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px} </style> </head> <body> <header> <h2>消息列表</h2> </header> <section class="list"> <ul class="list-ul"> <li id="li" class="list-li"> <p class="con"> 你的快递到了,请到楼下签收 </p> <p class="btn">删除</p> </li> <li class="list-li"> <p class="con"> 哇,你在干嘛,快点来啊就等你了 </p> <p class="btn">删除</p> </li> </ul> </section> <p>X: <span id="X"></span></p> <p>objX: <span id="objX"></span></p> <p>initX: <span id="initX"></span></p> <p>moveX: <span id="moveX"></span></p> <script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> <script type="text/javascript" src="zepto.touchWipe.js"></script> <script type="text/javascript"> $(function() { $('.list-li').touchWipe({itemDelete: '.btn'}); }); </script> </body> </html>
효과:
실제 프로젝트에서의 적용 효과:
맨 위로 BUG
제거 한 단계에서 우리는 기본적으로 필요한 기능을 달성했습니다. 하지만 몇 가지 문제가 있습니다:
1. 스팬이 큰 버튼까지 버블링될 수 없기 때문에 오른쪽의 삭제 버튼 클릭이 실패합니다.
2 매우 심각한 문제는 p에 touchmove 이벤트를 추가한 것입니다. 그리고 PreventDefault()를 사용하면 원래 브라우저 이벤트를 차단하여 p를 위아래로 슬라이드할 때 페이지를 스크롤할 수 없게 됩니다!
첫 번째 문제는 상대적으로 해결하기 쉽습니다. 다음과 같이 CSS에서 범위를 직접 제거하고 "삭제"를 :before에 씁니다.
.itemWipe .item-delete:before { content: '删除'; color: #fff; }
두 번째 문제의 경우 인터넷에서는 iscroll을 사용한다고 합니다. 해결하다. 모바일QQ의 접점 슬라이딩 동작에 대해 설명합니다.
일반 원리: 슬라이딩 시작 시 Y축 또는 X축 중 어느 쪽이 더 많이 움직이는지 결정합니다. X축 움직임이 크다면 슬라이딩 삭제 작업으로 판단하고, PreventDefault()를 사용합니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요!
관련 권장 사항:
JS는 모바일 단말기에서 왼쪽으로 슬라이딩하는 기능을 구현하여 삭제 버튼을 표시합니다
jQuery 및 CSS3는 플로팅 효과가 있는 모방 꽃잎 네트워크 고정 상단 위치 탐색 메뉴를 구현합니다
위 내용은 js는 QQ에서 연락처를 왼쪽으로 밀고 삭제 버튼을 밀어내는 동작을 모방합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!