يتم تنفيذ مفتاح شاشة H5 -Page Sliding باستخدام حدث HTML5 Touch (Touch) و CSS3 (الانتقال).
1. مبدأ التنفيذعلى افتراض أن هناك 5 صفحات ، تمثل كل صفحة شاشة عريضة بنسبة 100 ٪ ، ثم قم بإنشاء منفذ عرض حاوية DIV ، وضبط عرضه (العرض) إلى 500 ٪ ، ثم ضع 5 صفحات في الحاوية ، واترك هذه الصفحات الخمسة تقسم الصفحات الخمس .
<div id = viewport class = viewport> <div class = pageview style = background: #3b76c0> <h3> الصفحة -1 </h3> </fire> <div class = pageView = backgggggggggggggggggggggggggggggggggggggggggggggg > صفحة 2 </h3> </viv> <div class = pageview style = background: #c03b25 ؛> <h3> الصفحة -3 </h3> </viv> <div class = pageview style = background: #e0a7777777777777 18 ؛> <h3> الصفحة -4 </h3> </viv> <div class = pageview style = background: #c03eac ؛> <h3> page -5 </h3> </viv> </viv>
نمط CSS:
. حدث نقرة ، يرجى ملاحظة-Transplate3D (0،0،0) ؛
قم بتسجيل حادث TouchStart و TouchMove. ، 0) من Viewport (100 ٪ ، 0،0).
2. التفكير الرئيسيمن الإصبع على الشاشة ، فإن عملية الانزلاق ، وترك الشاشة هي عملية تشغيل كاملة.
ضع أصابعك على الشاشة: OnTouchStart
انقلب أصابعك على الشاشة: OnTouchMove
يترك الإصبع الشاشة: OnTouchend
نحتاج إلى التقاط هذه المراحل الثلاث من الحوادث المؤثرة لإكمال انزلاق الصفحة:
OnTouchStart: المتغيرات المهيئة ، سجل موقع الإصبع ، سجل الوقت الحالي
/*ضع أصابعك على الشاشة*/document.addeventristener (touchstart ، الدالة (e) {e.preventDefault () ؛ var touch = e.touchs [0] ؛ startx = touch.pagex CurrentPosition ؛OnTouchMove: احصل على الموقع الحالي ، وحساب الفرق المتحرك Deltax على الشاشة ، ثم اجعل الصفحة اتبع الحركة
/*انتقد أصابعك على الشاشة ، وتتبع الصفحة الإصبع لتحريك*/document.addeventristener (touchmove ، الدالة (e) {e.preventdefault () ؛ var touch = e.touchs [0] ؛ var deltax = touch = touch .P Agex -startx ؛ Math.abs (deltay) {movelength = deltax ؛ 0 && Transly = maxwidth) {// page this.transform. هذا) ، خطأ) ؛OnTouchend: عندما يترك إصبعك الشاشة ، يتم حساب الصفحة التي تظل الصفحة أخيرًا. أولاً ، قم بحساب وقت الإقامة على الشاشة.
إذا كان الانزلاق سريعًا ، فدع الصفحة الحالية تبقى في وسط الشاشة (كم تحتاج إلى تحريك الصفحة الحالية)
إذا كان الانزلاق ببطء ، فأنت بحاجة إلى الحكم على مسافة إصبعك على الشاشة. على الصفحة الحالية
/*عندما يغادر الإصبع الشاشة ، احسب الصفحة التي تحتاج إلى البقاء في النهاية*/document.addeventristener (touchind ، function (e) { إصبع على الشاشة. S- سهولة -نقل (Deltat <300) {// إذا كان وقت الإقامة أقل +PageWidth-Movelence ؛ {// إذا كانت المسافة الانزلاقية أقل من 50 ٪ من الشاشة ، فأعود إلى الصفحة السابقة (Math.ABS (Movelength)/PageWidth <0.5) {Translate = Atrrentposity-Movelength ؛ Translate == 'Left' على الشاشة تمامًا this.transform.call (عرض ، ترجمة) ؛}}.بالإضافة إلى ذلك ، تحتاج إلى حساب الصفحة الحالية هي الصفحة ، وتعيين رقم الصفحة الحالي
// حساب رقم الصفحة الحالي Pagenow = Math.Round (Math.ABS (Translate)/PageWidth) + 1 ؛ سوف يظهر هذا.
هذه هي الأفكار الأساسية. https://github.com/git -onepixel/ضيف
ما ورد أعلاه هو تحليل مبدأ التبديل بين HTML5. وقت. شكرا جزيلا لدعمكم لموقع VEVB Wulin!