ستشاركك هذه المقالة أمثلة تنفيذ العمليات على جهات اتصال مشابهة لـ QQ: انقلب على اليسار وانزلق زر الحذف. إذا كان ينزلق أكثر من النصف ، فسوف ينزلق تلقائيًا إلى الأسفل. إذا أصدرت أقل من النصف ، فسيعود إلى مكانها الأصلي.
تنفيذ JS النقي
استخدم H5 TouchMove وغيرها من الأحداث ، واستخدم JS لتغيير سمة ترجمة CSS3 بشكل ديناميكي لتحقيق تأثير الرسوم المتحركة:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = device-width ، scale = 1"> <title> html5swipe يركت لحذف التأثير الخاص </title> * الهامش: 0 ؛ على غرار القائمة: لا شيء ؛ } header {background: #f7483b ؛ border-bottom: 1px solid #ccc} header h2 {text-align: center ؛ Line-Leight: 54px ؛ حجم الخط: 16 بكسل ؛ اللون: #fff} .list-ul {overflow: Hidden} .list-li {line-height: 60px ؛ Border-Bottom: 1px Solid #FCFCFC ؛ الموقف: قريب الحشو: 0 12px ؛ اللون: #666 ؛ الخلفية: #f2f2f2 ؛ -webkit-transform: Translatex (0px) ؛ } .btn {الموضع: absolute ؛ أعلى: 0 ؛ اليمين: -80px ؛ محاذاة النص: المركز ؛ الخلفية: #FFCB20 ؛ اللون: #fff ؛ العرض: 80px} </style> <script>/** الوصف: HTML5 Apple Phone يركضون لحذف المؤثرات الخاصة*/window.addeventListener ('load' ، function () {var initx ؛ // touch position var movex ؛ // position var x = 0 ؛ Event.PreventDefault () ؛ "")) * 1 ؛ 0) {obj.style.webkittrans = "Translatex (" + 0 + "px)" ؛ "Translatex (" + -l + "px)" ؛ event.targetTouchs [0] .pagex ؛ "px)" ؛ (obj.classname == "list -li") {objx = (obj.style.webkittransform.replace (/translatex/(/g ، "") .replace (/px/)/g ، "")) * 1 ؛ OBJX = 0 ؛ الطابق السفلي </div> <viv> حذف </div> </li> <li> <viv> واو ، ماذا تفعل؟ تعال بسرعة وانتظرك </div> <viv> حذف </div> </li></ul> </ults> </body> </html>مصنوع في البرنامج المساعد Zepto
في المشاريع الفعلية ، قد يكون لدينا العديد من الأماكن التي تستخدم هذه الوظيفة. الآن لقد جعلنا هذه الوظيفة في مكون إضافي Zepto لسهولة الاستخدام لاحقًا.
في هذا البرنامج المساعد ، نقوم بتنفيذ هذه الوظيفة فقط ، ثم نمر في المعلمات (حذف اسم نمط الزر) للسماح للبرنامج بحساب المسافة اللازمة للانزلاق في JS ، وهو مريح لإعادة الاستخدام.
Zepto.Touchwipe.js
/*** Zepto plug-in: quipe left to sype the recliation effect* طريقة الاستخدام: $ ('. itemwipe'). touchwipe ({itemDelete: '.item-delete'}) ؛ * المعلمات: itemDelete اسم نمط زر الحذف*/؛ (الدالة ($) {$ .fn.touchWipe = function (ottor $ (otms.itemdelete). (obj.style.webkittransform.replace (/translatex/(/g ، "") .replace (/px/)/g ، "")) * 1 ؛ event.targettuches [0] .pagex ؛ (l> delwidth) {l = delwidth ؛ event.targetTouch [0] .pagex ؛ "px)" ؛ (obj.style.webkittransform.replace (/translatex/(/g ، "") .replace (/px/)/g ، ") * 1 ؛ "px)" // سلسلة إرجاع هذا ؛touchwipe.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = device-width ، scale = 1"> <title> html5swipe يركت لحذف التأثير الخاص </title> * الهامش: 0 ؛ قائمة القائمة: لا شيء ؛} رأس {background: #f7483b ؛ border-bottom: 1px solid #ccc} header h2 {text-align: center ؛ Line-Leight: 54px ؛ حجم الخط: 16 بكسل ؛ اللون: #fff} .list-ul {overflow: Hidden} .list-li {line-height: 60px ؛ Border-Bottom: 1px Solid #FCFCFC ؛ الموقف: قريب الحشو: 0 12px ؛ اللون: #666 ؛ الخلفية: #f2f2f2 ؛ -webkit-transform: Translatex (0px) ؛ } .btn {الموضع: absolute ؛ أعلى: 0 ؛ اليمين: -80px ؛ محاذاة النص: المركز ؛ الخلفية: #FFCB20 ؛ اللون: #fff ؛ العرض: 80px} </style> </head> <body> <Header> <h2> قائمة الرسائل </h2> </header> <section> <ul> <li id = "li"> <viv> وصل التسليم السريع الخاص بك ، يرجى تسجيل الدخول إلى الطابق السفلي </div> <iv> div </liv> </li> <li> <li> تعال بسرعة وانتظرك </div> <viv> حذف </div> </li></ul> </ul> </p> x: <span id = "x"> </span> </p> <p> objx: <span id = "objx"> </psan> </p> <p> init: <span id = "init" id = "movex"> </span> </p> <script type = "text/javaScript" src = "http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js type = "text/javaScript"> $ (function () {$ ('. list-li'). touchwipe ({itemDelete: '.btn'}) ؛}) ؛ </script> </body> </html>تأثير:
تأثيرات التطبيق في المشاريع الفعلية:
القضاء على الحشرات
الذهاب إلى الخطوة أعلاه ، ندرك بشكل أساسي الوظائف التي نحتاجها. ولكن هناك العديد من المشاكل :
1. فشل زر الحذف على اليمين لأن الفتنة لا يمكن أن تفوق على الزر الكبير ؛
2. مشكلة خطيرة للغاية. أضفنا حدث TouchMove إلى Div وحظرنا حدث المتصفح الأصلي باستخدام PreventDefault () ، مما تسبب في عدم قدرة الصفحة على التمرير عند الانزلاق لأعلى ولأسفل Div!
المشكلة الأولى أسهل في حلها. نقوم بإزالة الفترة مباشرة ونكتب "حذف" إلى CSS: من قبل ، مثل هذا:
.itemwipe .item-delete: قبل {content: 'delete' ؛ اللون: #fff ؛}للمشكلة الثانية ، يقال إنه من الممكن حلها عبر الإنترنت. هنا نشير إلى التشغيل المنزلق لجهات الاتصال في Mobile QQ.
المبدأ العام: في بداية الانزلاق ، حدد ما إذا كان المحور Y يتحرك أكثر أو يتحرك المحور السيني أكثر. إذا كان المحور السيني يتحرك كبيرًا ، فسيتم الحكم عليه على أنه عملية حذف منزلق ، وسوف نستخدم PreventDefault () ؛
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.