JQ осознает левый промахи, чтобы отобразить кнопку Delete, нажмите, чтобы удалить, чтобы достичь функции удаления данных (рекомендуется)

Диаграмма воспроизведения

Шаг 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> миньоны </p> <p> minions </p> <p> minions </p> </div> </i> <a> </iv> <iv> <iv> <iv> 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> delete </a> </d Div> </div>

Шаг 2: CSS

 .item-wrap {overflow: hidden; } .Item-wrap .Item {border-bottom: 1px #ff solid; Фон: #000; Ширина: 125%; переполнение: скрыто; позиция: относительно; дисплей: -Webkit -box; -Вебкит-трансляция: все 0,3 с линейно; } .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 {ширина: 0; высота: 0; высота линии: 0; размер шрифта: 0; пограничный стиль: твердый; Пограничный цвет: прозрачный прозрачный прозрачный #FFF; ширина границы: 8px 0px 8px 8px; позиция: абсолютно; Справа: 22%; Верх: 50%; Margin-top: -8px;}. Delect-btn {ширина: 20%; Мяботая маржа: 15px; Цвет: #fff; Фон: #0F0; Z-Index: 999; дисплей: блок; Текст-альбом: Центр; накладная-top: 5%;}. item-wrap. Selected {-webkit-transform: transtate (-16%); -Вебкит-транзиция: все 0,3 с линейной;}

Шаг 2: JQ

 <script> $ (". item"). On ('swipeleft', function (event) {event.preventDefault (); / * act на событие * / $ (this) .AdClass ('selected'). сестры ('.. Item'). Removeclass ('selected'); $ (это). Event.PreventDefault (); $ (". item"). On ('swiperight', function (event) {event.preventDefault ();/ * act на событие */$ (this) .RemoveClass ('selected');}); </script>

Приведенная выше статья JQ осознает левый удар, чтобы отобразить кнопку Delete, нажмите, чтобы удалить, чтобы реализовать функцию Delete Data (рекомендуется) - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.