على الرغم من وجود العديد من المكونات الإضافية المتاحة ، من أجل التحسن معًا ، قمت بعمل سلسلة من الأمثلة على سلسلة JavaScript العملية ومشاركتها معك. إذا كان لديك أي اقتراحات جيدة ، فيرجى التأكد من الإشارة إليها حتى لا تضلل أطفالك!
اليوم هي المعركة الأولى: قائمة ذات تأثير رسوم متحركة وإصدارها ، والتأثير كما يلي: (النمط قبيح بعض الشيء (-^-))
(بما أنني استخدمت محررين مختلفين عندما كنت أكتب هذا المقال ، لا يمكن إضافة تأثير العرض التجريبي في الوقت الحالي. وهنا: الرمز الكامل النهائي والمظاهرة)
تأثير الرسوم المتحركة: يغير تحوم الماوس الخلفية ولون الخط لجميع الأهداف ، ونقل الماوس إلى "التنقل في الصفحة الرئيسية" ، وعرض قائمة التجميع أدناه. قائمة التجميع لديها قائمة فرعية. انقر إلى التكبير ، مما سيؤدي إلى تأثيرات على الرسوم المتحركة المفرطة! علاوة على ذلك ، يمكنك إضافة وحذف قوائم الملاحة والراكات الفرعية في الإرادة دون التأثير على التأثير!
كيف تحقق ذلك؟
الخطوة 1: ماذا تستخدم لتنفيذ القائمة؟ تم تصميم رمز HTML على النحو التالي ، باتباع مبدأ فصل رمز JS ورمز HTML! لا يمكنك رؤية رمز JS هنا
كان هذا ما بدا عليه قبل تطبيق الأسلوب: لقد كان قديمًا جدًا! ! !
الخطوة 2: نمط CSS. يغير تحوم الماوس الخلفية ولون الخط لجميع الأهداف ، ويستخدم مباشرة انتقال CSS و: تحوم. ومع ذلك ، لن ندرج جميع تخطيطات نمط CSS الأخرى. دعونا نفعل ذلك بنفسك. انتبه إلى النقاط التالية:
#ul {.... z-index: 100 ؛ } #ul li {display: inline block ؛ الموقف: قريب أعلى: 0 ؛ اليسار: -25 بكسل ؛ العرض: 10 ٪ ؛ Min-Width: 70px ؛ الارتفاع: 30 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 30 بكسل ؛ الحدود: 1 بكسل رمادي صلب. الحدود الحدودية: 10px ؛ خلفية اللون: أليس بلو ؛ المؤشر: مؤشر. -Webkit-transition: كل سهولة في الواجهة 0.3s ؛ -انتقال الأوز: كل ما في وسعه. -MS-Ransition: كل سهولة في الواجهة 0.3s ؛ -الرانس: كل ما في وسعه. الانتقال: كل سهولة في 0.3s ؛ } #ul li: hover {background-color: quamarine ؛ color: red ؛} ... الحدود الحدودية: 10px ؛ اللون: أسود. العرض: لا شيء ؛ Opitive: 0} .a {z -index: -1 ؛ العرض: كتلة ؛ ...}الخطوة 3: هذه الخطوة هي النقطة الرئيسية. إذا قمت بإضافة حدث يستمع إلى كل خيار قائمة وتجميع ، أعتقد شخصياً أنه مشكلة كبيرة ، ويجب أن يكون مقدار الكود أكبر أو أقل. هل هناك أي طريقة لإضافة مراقبة إلى عنصر لتحقيق ذلك؟
يجب أن يكون هناك إجابة ، باستخدام آلية الأحداث الفقاعية! أضف الحدث الاستماع إلى علامة العنصر الأصل UL ، وتغيير نمط العنصر مباشرة لحدث الزناد في وظيفة الاستماع ، الأمر بهذه البساطة!
الرمز كما يلي:
var ul = document.getElementById ('ul') ؛ UL.AdDeventListener ('mouseover' ، leader1 ، false) ؛ ul.addeventListener ('mouseout' ، leader2 ، false) ؛ UL.AdDeventListener ('click' ، leader3 ، false) ؛نظرًا لأن IE8 والإصدارات أدناه لا تحتوي على addeventListener ، إذا كنت تريد أن تكون متوافقة ، فيجب عليك إضافة رمز Actuckevent المقابل.
الخطوة 4 : يظهر بطل الرواية! تنفيذ المستمع 1 ، المستمع 2 ، مستمعات الاستماع.
أولاً ، دعنا نأخذ أبسط وظيفة مستمع 1 ، الرمز هو كما يلي:
وظيفة المستمع 1 (الحدث) {// event = event || window.event ؛ // متوافق مع IE8 والإصدارات السابقة var target = event.target || event.srcelement ؛ // متوافق مع IE8 والإصدارات السابقة if (target.tagname.toLowerCase () === 'li') {var div1 = target.getElementsByTagname ('div') [0] ؛ div1.style.display = 'block' ؛ var i = 0 ؛ معرف var ؛ (function foo () {if (i> = 1) {clearTimeOut (id) ؛ id = null ؛ return ؛} i+= 0.2 ؛ div1.style.opacity = i ؛ id = setTimeOut (function () {cleartimeout (id) ؛ foo ()} ، 30) ؛}) () ؛ }}مرة أخرى ، كل شيء للإصدارات IE8 والأقدم.
1. لأن حدثه لا يحتوي على سمة مستهدفة ، فقط سمة srcelement المقابلة
2. وهذا الحدث الجملة = الحدث || window.event ؛ يمكن حذفها بالفعل هنا. فقط عند استخدام سمات لضبط الاستماع لحدث التسجيل ، مثل ul.onmouseover = function () {} ، أو <ul onMouseover = 'func' ، يمكن أن تحصل IE8 والإصدارات القديمة فقط على كائن الحدث الحالي من خلال window.event
حسنًا ، بعد أن حصلت على هدف حدث الزناد الحالي ، تكون الأمور أبسط بكثير ، والتي من خلالها يمكنك تغيير نفسك وأقاربها!
فيما يلي وظيفة المستمع 2 ، التي يتم تشغيلها عند معالجة Mouseout ، بشكل أساسي مع عنصر الطفل المستهدف ، يكون الرمز كما يلي:
وظيفة المستمع 2 (الحدث) {// event = event || window.event ؛ var target = event.target || event.srcelement ؛ if (target.tagname.toLowerCase () === 'li') {var div1 = target.getElementSbyTagName ('div') [0] ؛ div1.onmouseover = function () {div1.style.display = 'block' ؛ div1.style.Opacity = 1 ؛ } ؛ div1.onmouseout = function () {div1.style.display = 'none' ؛ div1.style.Opacity = 0 ؛ } ؛ div1.style.display = 'none' ؛ // هذه المجموعة هي إخفاء div1 عندما يخرج الماوس من أعلى div1.style.Opacity = 0 ؛ }}حسنًا ، الآن ، تم تحقيق معظم التأثيرات ، وهناك الخطوة الأخيرة ، أي بطل الرواية رقم 1: وظيفة المستمع ، وهي مسؤولة بشكل أساسي عن تأثير التحجيم عند النقر فوق الماوس!
مبدأ التنفيذ:
1. حدد متغير Bool خارج الوظيفة كمفتاح ، انقر فوق الماوس وانقر فوق OFF مرة أخرى ؛
2. استخدم setTimeout لتحقيق تأثيرات الرسوم المتحركة ، وتغيير سمات الارتفاع والتعري بشكل ديناميكي للسرقة الفرعية ، وسمة العرض ؛
الرمز الكامل كما يلي:
var bool = true ؛ وظيفة المستمع 3 (الحدث) {var event = event || window.event ؛ var target = event.target || Event.Srcelement ؛ if (target.className === 'show-hide') {var parent = target.parentElement ؛ var adiv = parent.getElementsByClassName ('a-div') [0] ؛ if (window.getComputedStyle (adiv ، null) .opacity> 0.5) {bool = false} else {bool = true} var height = 90 ، changeh ، extress ، id ؛ if (bool) {changeh = 0 ؛ الغضب = 0 ؛ target.innerhtml = 'financial-' ؛ (دالة show () {if (changeh> height) {cleartimeout (id) ؛ return ang changeh += 5 ؛ opacity += 0.06 ؛ //console.log('opacity:'+adiv.style.opacity+' ، height: ' +adiv.style.height) ؛ adiv.style.height = changeh +' px '؛ adiv.style.display = 'block' ؛ Bool = false ؛ } آخر {changeh = الارتفاع ؛ العتامة = 1 ؛ target.innerhtml = 'financial+' ؛ (الوظيفة hidden () {if (changeh <0) {cleartimeout (id) ؛ adiv.style.display = 'none' ؛ return} changeh -= 10 ؛ opitated -= 0.11 ؛ //console.log('opacity :'+adiv.style.opacity+' ، adiv.Style.height) ؛ adiv. adiv.Style.Opacity = المعرف ؛ Bool = صحيح ؛ }}}بضع نقاط يجب ملاحظة:
1. تذكر مسح معرف setTimeout والخروج ، وإلا فإن الحلقة الميتة تشبه (changeh <0) {cleartimeout (id) ؛ adiv.style.display = 'none' ؛ return}
2. يتم تعيين وقت تأخير setTimeout على 16.7 لأنه يلبي معدل تحديث الشاشة 60 إطارًا في الثانية ، مما يجعل من المريح أن ننظر
3. أثناء عملية تصحيح الأخطاء ، عند ضبط قيم الزيادة والانخفاض في التغيير والتعري ، تذكر طباعتها لتسهيل تصحيح الأخطاء:
console.log ('opabity:'+adiv.style.opacity+'، الارتفاع:'+adiv.style.height) ؛
4. أخيرًا ، أهم شيء في تنفيذ القائمة بأكملها هو الجملة التالية. بدون هذه الجملة ، لا يمكنك تنفيذ جميع الوظائف تمامًا. على سبيل المثال: عند النقر فوق مجموعة من القائمات الفرعية ثم الانتقال إلى مجموعات أخرى ، سيكون الموقف مختلفًا تمامًا ؛ والسبب في أن window.getComputedStyle يستخدم هذا هو أنه عند فتح المرة الأولى ، فإن النقر على أي مجموعة لا يستجيب ، لأنه لا يمكن الحصول على قيمة العتامة عند النقر على المرة الأولى من خلال Event.Target مباشرة.
if (window.getComputedStyle (adiv ، null) .opacity> 0.5) {bool = false} آخر {bool = true} ؛
ومع ذلك ، فإن طريقة getComputedStyle غير مدعومة أدناه IE9 ، ويحتوي كائن عنصر IE على خاصية CurrentStyle ؛
إذا لم تكن معتادًا جدًا على معالجة CSS ، فقم بإلقاء نظرة على ملخصي: ملخص لكيفية قراءة أنماط CSS وكتابة باستخدام JS الأصلي
إذا كنت ترغب في معرفة المزيد عن تطبيق طريقة setTimeOut () ، ألق نظرة على هذا: هل تعرف حقًا كيف يعمل SetTimeout
لآلية التعامل مع الأحداث ، يمكنك إلقاء نظرة على هذا: نظرة عامة على معالجة الأحداث في DOM وتحليل شامل لمبادئ معالجة الأحداث في DOM
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.