رسم تخطيطي للتكاثر
الخطوة 1: التحميل
<script src = "js/jquery.min.js"> </script> <script src = "js/jquery.mobile-1.3.2.min.js"> </script>
الخطوة 2: HTML
<viv> <viv> <img src = "images/icon.png"> </viv> <viv> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> src = "images/icon.png"> </viv> <viv> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> </p>
الخطوة 2: CSS
.item-wrap {overflow: Hidden ؛ } .item-wrap .item {border-bottom: 1px #ff solid ؛ الخلفية: #000 ؛ العرض: 125 ٪ ؛ الفائض: مخفي. الموقف: قريب Display: -webkit -box ؛ -بكيت ترانس: جميع 0.3S خطي ؛ . الارتفاع: 50 بكسل ؛ الهامش: 10px ؛ . الحدود الحدودية: 50 ٪ ؛ } .item-wrap .item .txt-item {padding-top: 10px ؛ يمين الهامش: 25 بكسل ؛ حجم الخط: 14px ؛ Line-Leight: 24px ؛ اللون: #fff ؛ -webkit-box-flex: 1 ؛ } .item-wrap .item .arrow {width: 0 ؛ الارتفاع: 0 ؛ Line-Leight: 0 ؛ حجم الخط: 0 ؛ على غرار الحدود: صلبة. لون الحدود: شفافة شفافة #FFF ؛ عرض الحدود: 8px 0px 8px 8px ؛ الموقف: مطلق ؛ اليمين: 22 ٪ ؛ أعلى: 50 ٪ ؛ الهامش: -8px ؛}. Delect-Btn {Width: 20 ٪ ؛ الهامش اليساري: 15px ؛ اللون: #fff ؛ الخلفية: #0f0 ؛ Z-index: 999 ؛ العرض: كتلة ؛ محاذاة النص: المركز ؛ Padding-Top: 5 ٪ ؛}. item-wrap .Exted {-WebKit-transform: Translate (-16 ٪) ؛ -الويبكيت ترانس: جميع 0.3s خطي ؛}الخطوة 2: JQ
<script> $ (". item"). على ('swipeleft' ، function (event) {event.preventDefault () ؛ / * Act on the event * / $ (this) .addClass ('Selection'). Siblings ('. item'). removeclass ('select') ؛ $ (this) .find (. Event.PreventDefault () ؛ $ (". item"). on ('swiperight' ، function (event) {event.preventDefault () ؛/ * Act على الحدث */$ (this) .removeclass ('محدد') ؛}) ؛ </script>يدرك المقالة أعلاه JQ التمرير الأيسر لعرض زر الحذف ، انقر إلى حذف لتحقيق وظيفة بيانات الحذف (الموصى بها) هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.