Эта статья поделится с вами примерами реализации операций на контактах, аналогичных QQ: проведите влево и выдвиньте кнопку «Удалить». Если он скользит более половины, он автоматически скользит на дно. Если он выпустит менее половины, он вернется к своему первоначальному месту.
Чистая реализация JS
Используйте H5 Touchmove и другие события и используйте JS, чтобы динамически изменить атрибут Translate CSS3 для достижения эффекта анимации:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = device-width, начальная масштаба = 1"> <Tite> html5swipe, чтобы удалить специальный эффект </title> <style> * {padding: 0; поля: 0; Список стиля: нет; } Header {founale: #F7483b; Border-Bottom: 1px solid #ccc} заголовок H2 {text-align: center; высота линии: 54px; размер шрифта: 16px; Color: #fff} .list-ul {overflow: hidden} .list-li {line-hight: 60px; Пограничный подвод: 1PX SOLID #FCFCFC; позиция: относительно; Заполнение: 0 12px; Цвет: #666; Фон: #f2f2f2; -Webkit-transform: transtatex (0px); } .btn {position: Absolute; Верх: 0; Справа: -80px; Текст-альбом: Центр; Фон: #ffcb20; Цвет: #fff; Ширина: 80px} </style> <script>/** Описание: html5 Apple Phone Swips влево, чтобы удалить спецэффекты*/window.addeventlistener ('load', function () {var initx; // touch position varex; // position var x = 0; // расстояние перемещения objx = 0; // целевое положение объекта. Event.preventDefault (); } if (objx == 0) {window.addeventListener ('touchmove', function (event) {event.preventDefault (); var obj = event.target.parentnode; if (obj.classname == "list -li") {oepx = event.targetTouches [0] .Pagex; obj.style.webkittransform = "translatex (" + 0 + "PX)" -l + "px)";}}}}}); event.targetTches [0] .pagex; "PX)"; (obj.classname == "list -li") {objx = (obj.style.webkittransform.replace (/transtatex/(/g, "") .Replace (/px/)/G, "")) * 1; 0; Внизу </div> <div> удалить </div> </li> <li> <div> вау, что ты делаешь? Приходите быстро и подождите </div> <div> delete </div> </li> </ul> </section> </body> </html>Сделано в плагин Zepto
В реальных проектах у нас может быть много мест, которые используют эту функцию. Теперь мы превратили эту функцию в плагин Zepto для удобства использования позже.
В этом плагине мы только реализуем эту функцию, а затем передаем параметры (удалите название стиля кнопки), чтобы программа вычислила расстояние, необходимое для скольжения в JS, что удобно для повторного использования.
Zepto.touchwipe.js
/*** Zepto Плагин: проведите влево, чтобы удалить эффект анимации* Метод использования: $ ('. itemwipe'). Touchwipe ({itemdelete: '.item-delete'}); * Параметры: ITEMDELETE Имя стиля кнопки DELETE*/; (function ($) {$ .fn.touchwipe = function (опция) {var defaults = {itemdelete: '.item-delete', // delete element}; var opts = $ .extend ({}, delete, опция); $ (opts.itemDelet) .width (); (obj.style.webkittransform.replace (/transtatex/(/g, "") .replace (/px/)/g, "")) * 1; Movex - initx; obj.style.webkittransform = "translatex (" + -l + "px)"; > = 0) {var r = -delwidth + math.abs (x); obj.style.webkittransform = "translatex (" + -delwidth + "px)"; "). obj.style.transition = "All 0.2s";Touchwipe.html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = device-width, начальная масштаба = 1"> <Tite> html5swipe, чтобы удалить специальный эффект </title> <style> *{padding: 0; поля: 0; Список стиля: none;} Header {founale: #f7483b; Border-Bottom: 1px solid #ccc} заголовок H2 {text-align: center; высота линии: 54px; размер шрифта: 16px; Color: #fff} .list-ul {overflow: hidden} .list-li {line-hight: 60px; Пограничный подвод: 1PX SOLID #FCFCFC; позиция: относительно; Заполнение: 0 12px; Цвет: #666; Фон: #f2f2f2; -Webkit-transform: transtatex (0px); } .btn {position: Absolute; Верх: 0; Справа: -80px; Текст-альбом: Центр; Фон: #ffcb20; Цвет: #fff; Ширина: 80px} </style> </head> <body> <header> <h2> Список сообщений </h2> </header> <section> <ul> <li id = "li"> <div> Ваша экспресс -доставка прибыла, пожалуйста, подпишите внизу </div> <div> Удалить </div> </li> <li> <div>, что вы делаете? Приходите быстро и подождите вас </div> <d Div> delete </div> </li> </ul> </section> <p> x: <span id = "x"> </span> </p> <p> objx: <span id = "objx"> </span> <p> <p> init: <pan Id = "initx"> </span> </p> <p> <p> init: <pan Id = " id = "Movex"> </span> </p> <script type = "text/javascript" src = "http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"> </script> <script = "text/javascript" src = "zepto.touch type = "text/javascript"> $ (function () {$ ('.Эффект:
Эффекты приложения в реальных проектах:
Устранить ошибки
Пройдя на вышеупомянутый шаг, мы в основном понимаем необходимые нам функции. Но есть несколько проблем :
1. Нажмите кнопку «Удалить справа» не удается, потому что пролет не может пузыриться на большую кнопку;
2. Очень серьезная проблема. Мы добавили событие Touchmove в DIV и заблокировали оригинальное событие браузера с помощью PreflectDefault (), что привело к тому, что страница не смогла прокручивать при скольжении вверх и вниз по DIV!
Первую проблему легче решить. Мы удаляем пролет напрямую и пишем «Удалить» в CSS: до, как это:
.ItemWipe .Item-Delete: до {content: 'delete'; Цвет: #fff;}Что касается второй проблемы, то говорят, что он может решить его в Интернете. Здесь мы ссылаемся на скользящую работу контактов в мобильном QQ.
Общий принцип: В начале скольжения определите, движется ли ось Y больше или ось X движется больше. Если ось X движется крупно, она считается операцией по скользящей делеции, и мы будем использовать PreflectDefault ();
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.