복제 다이어그램
1 단계 : 로딩
<script src = "js/jquery.min.js"> </script> <script src = "js/jquery.mobile-1.3.2.min.js"> </script>
2 단계 : HTML
<div> <div> <IMG SRC = "Image/Icon.png"> </div> <div> <p> 미니언 </p> <p> 미니언 </p> <p> 미니언 </p> <p> 미니언 </p> </div> <i> <a> </a> </div> </>> src = "images/icon.png"> </div> <div> <p> 미니언 </p> <p> 미니언 </p> <p> 미니언 </p> <p> 미니언 </p> <p> 미니언 </p> </div> <i> </i> <a> </div>
2 단계 : CSS
.item-wrap {오버플로 : 숨겨진; } .item-wrap .item {Border-Bottom : 1px #ff solid; 배경 : #000; 너비 : 125%; 오버플로 : 숨겨진; 위치 : 상대; 디스플레이 : -webkit -box; -webkit-transition : 모든 0.3s 선형; } .item-wrap .item .img-item {너비 : 50px; 높이 : 50px; 여백 : 10px; } .item-wrap .item .img-item img {너비 : 100%; 국경-라디우스 : 50%; } .item-wrap .item .txt-item {padding-top : 10px; 마진 오른쪽 : 25px; 글꼴 크기 : 14px; 라인 높이 : 24px; 색상 : #fff; -webkit-box-flex : 1; } .item-wrap .item .Arrow {너비 : 0; 높이 : 0; 라인 높이 : 0; 글꼴 크기 : 0; 국경 스타일 : 단단한; 국경 색 : 투명한 투명 투명 #fff; 테두리-width : 8px 0px 8px 8px; 위치 : 절대; 오른쪽 : 22%; 상단 : 50%; 마진-탑 : -8px;}. delect-btn {너비 : 20%; 마진 왼쪽 : 15px; 색상 : #fff; 배경 : #0f0; Z- 인덱스 : 999; 디스플레이 : 블록; 텍스트 정렬 : 센터; 패딩 탑 : 5%;}. 항목-랩 .Selected {-webKit-transform : 번역 (-16%); -webkit-transition : 모든 0.3s 선형;}2 단계 : JQ
<cript> $ ( ". item"). on ( 'swipeleft', function (event) {event) {event.preventDefault (); 이벤트에서 행동 * / $ (this) .addclass ( 'selected'). 형제 ( '. 항목'). RemoveClass ( 'selected'); $ ( ') event.preventDefault (); $ ( ". item"). on ( 'swiperight', function (event) {event.preventDefault ();/ * 이벤트에서 act */$ (this) .removeClass ( 'selected');}); </script>위의 기사 JQ는 왼쪽 스 와이프를 인식하여 삭제 버튼을 표시하고 삭제를 클릭하여 삭제 데이터 기능 (권장)이 내가 공유하는 모든 컨텐츠임을 인식하십시오. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.