แผนผังการสืบพันธุ์
ขั้นตอนที่ 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 = "images/icon.png"> </div> <div> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> </div> src = "images/icon.png"> </div> <div> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> </div> <i> </i> <a>
ขั้นตอนที่ 2: CSS
.item-wrap {overflow: ซ่อน; } .item-wrap .item {border-bottom: 1px #ff solid; ความเป็นมา: #000; ความกว้าง: 125%; ล้น: ซ่อน; ตำแหน่ง: ญาติ; แสดง: -webkit -box; -webkit-transition: 0.3s เชิงเส้นทั้งหมด; } .item-wrap .item .Img-item {width: 50px; ความสูง: 50px; มาร์จิ้น: 10px; } .Item-wrap .ITEM .IMG-ITEM IMG {WIDTH: 100%; แนวชายแดน: 50%; } .item-wrap .item .txt-item {padding-top: 10px; มาร์จิ้น-ขวา: 25px; ขนาดตัวอักษร: 14px; ความสูงของสาย: 24px; สี: #FFF; -webkit-box-flex: 1; } .item-wrap .item .arrow {width: 0; ความสูง: 0; ความสูงบรรทัด: 0; ขนาดตัวอักษร: 0; สไตล์ชายแดน: ของแข็ง; สีชายแดน: โปร่งใสโปร่งใส #FFF; ความกว้างของชายแดน: 8px 0px 8px 8px; ตำแหน่ง: สัมบูรณ์; ขวา: 22%; ด้านบน: 50%; ระยะขอบ: -8px;}. DELECT-BTN {WIDTH: 20%; ขอบซ้าย: 15px; สี: #FFF; ความเป็นมา: #0F0; z-index: 999; แสดง: บล็อก; TEXT-ALIGN: CENTER; Padding-Top: 5%;}. รายการ-ห่อ. เลือก {-webkit-transform: แปล (-16%); -webkit-transition: 0.3s linear;} ทั้งหมดทั้งหมดขั้นตอนที่ 2: JQ
<script> $ (". item"). on ('swipeleft', ฟังก์ชั่น (เหตุการณ์) {event.preventdefault (); / * ดำเนินการกับเหตุการณ์ * / $ (นี่) .AddClass ('เลือก'). delect ('). Event.preventDefault (); $ (". item") บน ('swiperight', ฟังก์ชั่น (เหตุการณ์) {event.preventDefault ();/ * ดำเนินการกับเหตุการณ์ */$ (นี่) .removeClass ('เลือก');}); </script>บทความด้านบน JQ ตระหนักถึงการปัดด้านซ้ายเพื่อแสดงปุ่มลบคลิกเพื่อลบเพื่อรับรู้ฟังก์ชั่นการลบข้อมูล (แนะนำ) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น