이 기사에서는 QQ : Swipe Left 및 Delete 버튼을 밀어 넣는 연락처에서 작업을 구현하는 예제를 공유합니다. 절반 이상 미끄러지면 자동으로 바닥으로 미끄러집니다. 절반 미만을 방출하면 원래 장소로 돌아갑니다.
순수한 JS 구현
H5 TouchMove 및 기타 이벤트를 사용하고 JS를 사용하여 CSS3의 번역 속성을 동적으로 변경하여 애니메이션 효과를 달성하십시오.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport"id = "viewport"content = "width ="device-width, 초기-스케일 = 1 "> <title> html5swipe </title> {style> * {패드 : 0; 여백 : 0; 목록 스타일 : 없음; } 헤더 {배경 : #f7483B; Border-Bottom : 1px Solid #CCC} 헤더 H2 {Text-Align : Center; 라인 높이 : 54px; 글꼴 크기 : 16px; 색상 : #fff} .list-ul {오버 플로 : hidden} .list-li {line-height : 60px; 국경-바닥 : 1px solid #fcfcfc; 위치 : 상대; 패딩 : 0 12px; 색상 : #666; 배경 : #f2f2f2; -webkit-transform : translatex (0px); } .btn {위치 : 절대; 상단 : 0; 오른쪽 : -80px; 텍스트 정렬 : 센터; 배경 : #ffcb20; 색상 : #fff; width : 80px} </style> <cript>/** 설명 : HTML5 Apple 전화 스 와이프 스파이프 왼쪽 특수 효과*/window.addeventListener ( 'load', function () {var initx; // touch 위치 var movex; // position var x = 0; // movement objx = 0; // target 객체 위치 창. 이벤트. } if (objx == 0) {window.adeventListener ( 't obj.style.webkittransform = "x <0) {var l = webkittransform =" + -l + "px"; "px)";}} else if (objx <0) {window.adeventListener ( 'touchMove', function (event) {event.preventDefault (); target.paret.paret.paret. if (obj.className == "list-li") = INTEX (x> = 0) {var r = -80 + obj.style.webkittransform = if (r> 0); obj.style.webkittransform = " + -80 +"px)}}); objx = (/px/)/g, ") * 1; = "Translatex (" + -80 + "px)"; OBJX = -80; <div> 와우, 뭐하는거야? 빨리 와서 당신을 기다리십시오 </div> <div> delete </div> </li> </ul> </section> </body> </html>Zepto 플러그인으로 만들어졌습니다
실제 프로젝트에서는이 기능을 사용하는 많은 장소가있을 수 있습니다. 이제 우리는이 기능을 Zepto 플러그인으로 만들어 나중에 쉽게 사용할 수있었습니다.
이 플러그인에서는이 기능 만 구현 한 다음 매개 변수를 전달하여 (버튼의 스타일 이름을 삭제) 프로그램이 JS에서 슬라이드하는 데 필요한 거리를 계산할 수 있도록합니다.
zepto.touchwipe.js
/*** Zepto 플러그인 : 애니메이션 효과를 삭제하기 위해 왼쪽 스 와이프* 사용 방법 : $ ( '. itemwipe'). touchWipe ({itemdelete : '.item-delete'}); * 매개 변수 : itemdelete 삭제 버튼의 스타일 이름*/; $ (opts.itemdelete). (obj.style.webkittransform.replace (/ranstalex/(/g, "") .replace (/px/)/g, "") * 1; movex -initx (x> = 0) {obj.style.webkittransform = "var <0) {var l = math. obj.style.webkittransform = "Translatex (" + -l + "px)"; {var r = -delwidth + math.abs (x); " + r +"px) {r = 0; obj.style.webkittransform = "Translatex (" + -delwidth + "px)";}; ").") * 1; OBJ.Style.touchwipe.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport"id = "viewport"content = "width ="device-width, 초기-스케일 = 1 "> <title> html5swipe </title> {style> *{패드 : 0; 여백 : 0; 목록 스타일 : 없음;} 헤더 {배경 : #f7483b; Border-Bottom : 1px Solid #CCC} 헤더 H2 {Text-Align : Center; 라인 높이 : 54px; 글꼴 크기 : 16px; 색상 : #fff} .list-ul {오버 플로 : hidden} .list-li {line-height : 60px; 국경-바닥 : 1px solid #fcfcfc; 위치 : 상대; 패딩 : 0 12px; 색상 : #666; 배경 : #f2f2f2; -webkit-transform : translatex (0px); } .btn {위치 : 절대; 상단 : 0; 오른쪽 : -80px; 텍스트 정렬 : 센터; 배경 : #ffcb20; 색상 : #fff; 너비 : 80px} </style> </head> <body> <header> <h2> 메시지 목록 </h2> </header> <ul> <li id = "li"> <div> 당신의 익스프레스 배달이 도착했습니다. 아래쪽으로 서명하십시오 </div> </li> <li> <li> <li> <div> 와우, 어떻게 지내십니까? </div> <div> delete </div> </li> </li> </ul> </section> <p> x : <span id = "x"> </span> </p> <p> objx : <span id = "objx"> </span> </p> <p> initx : <span id = "initx"> </p> <p> <p> <p> <p> id = "movex"> </span> </p> <script type = "text/javaScript"src = "http://apps.bdimg.com/libs/zepto/1.1.1.4/zepto.min.js"> </script> <script> <script "script"src = "zepto.touchwwefe.js"> type = "text/javaScript"> $ (function () {$ ( '. list-li'). touchWipe ({itemdelete : '.btn'});}); </script> </body> </html>효과:
실제 프로젝트의 응용 프로그램 효과 :
버그를 제거하십시오
위의 단계로 가면 기본적으로 필요한 기능을 인식합니다. 그러나 몇 가지 문제가 있습니다 .
1. 오른쪽의 삭제 버튼을 클릭하면 스팬이 큰 버튼에 거품이 생길 수 없기 때문에 실패합니다.
2. 매우 심각한 문제. 우리는 DIV에 터치 모브 이벤트를 추가하고 OrgenceDefault ()로 오리지널 브라우저 이벤트를 차단하여 DIV 위아래로 슬라이딩 할 때 페이지가 스크롤 할 수 없게되었습니다!
첫 번째 문제는 해결하기가 더 쉽습니다. 스팬을 직접 제거하고 CSS에 "삭제"를 작성합니다.
.itemwipe .item-delete : evere {content : 'delete'; 색상 : #fff;}두 번째 문제는 온라인에서 해결하는 것이 iccroll이라고합니다. 여기서는 모바일 QQ에서 접점의 슬라이딩 작동을 나타냅니다.
일반 원칙 : 슬라이딩 시작시 y 축이 더 많이 움직이는 지 또는 x 축이 더 많이 움직이는 지 결정하십시오. x 축이 크게 이동하면 슬라이딩 삭제 작업으로 판단되며 Areverdefault ()를 사용합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.