ستستمر هذه المقالة في إضافة آثار القائمة المختلفة التي كتبتها في JS الأصلي. على الرغم من أنني بحثت كثيرًا على الإنترنت ، إلا أنني ما زلت أحب كتابته بنفسي!
هذه هي المقالة السابقة: JavaScript Combat (قائمة التنقل مع جمع وإصدار تأثيرات الرسوم المتحركة)
فيما يلي الرمز الكامل المحسّن ، ونمط CSS المحسّن ، ووظائف الأحداث المبسطة ، ومستويات HTML المخفضة ، وحذف ما لا يقل عن 20 سطرًا من التعليمات البرمجية الزائدة.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </itlect> <script> window.onload = function () {// =============================== var ul = document.getelementbyid ('ul') ؛ if (ul.addeventListener) {ul.addeventListener ('mouseover' ، leader1 ، true) ؛ ul.addeventListener ('mouseout' ، leader2 ، true) ؛ UL.AdDeventListener ('click' ، leader3 ، false) ؛ } آخر إذا (ul.attachevent) {// متوافق مع IE8 والإصدارات السابقة ul.attachevent ('onMouseover' ، المستمع 1 ، false) ؛ ul.attachevent ('onMouseout' ، leader2 ، false) ؛ ul.attachevent ('onclick' ، leader3 ، false) ؛ } وظيفة المستمع 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' ؛ div1.style.Opacity = 1 ؛ }} مستمع دالة 2 (الحدث) {// event = event || window.event ؛ var target = event.target || event.srcelement ؛ if (target.tagname.toLowerCase () === 'li') {var div1 = target.getElementSbyTagName ('div') [0] ؛ div1.style.display = 'none' ؛ div1.style.Opacity = 0 ؛ div1.onmouseover = function () {div1.style.display = 'block' ؛ div1.style.Opacity = 1 ؛ } ؛ div1.onmouseout = function () {div1.style.display = 'none' ؛ div1.style.Opacity = 0 ؛ } ؛ }} var bool = true ؛ وظيفة المستمع 3 (الحدث) {var event = event || window.event ؛ var target = event.target || Event.Srcelement ؛ if (target.className === 'show-hide') {var adiv = target.nextElementSibling ؛ if (window.getComputedStyle (adiv ، null) .opacity> 0.5) {bool = false} else {bool = true} var height = 90 ، changeh ، extress ، id ؛ if (bool) {changeh = 0 ؛ الغضب = 0 ؛ var text = target.innerhtml.slice (0 ، -1) ؛ target.innerhtml = text+' -' ؛ (دالة show () {if (changeh> height) {cleartimeout (id) ؛ return ang changeh += 5 ؛ opacity += 0.06 ؛ console.log ('opatity:' +adiv.style.opacity +'، Height:' +adiv.style.height) ؛ adiv.style.height = changeh +'px' ؛ adiv. adiv.style.display = 'block' ؛ Bool = false ؛ } آخر {changeh = الارتفاع ؛ العتامة = 1 ؛ var text = target.innerhtml.slice (0 ، -1) ؛ target.innerhtml = text +' +' ؛ (الوظيفة Hidden () {if (changeh <0) {cleartimeout (id) ؛ adiv.style.display = 'none' ؛ return} changeh -= 10 ؛ opatited -= 0.11 ؛ console.log ('extiv:'+adiv.style.opacity+'، quert:'+adiv.style.height) ؛ adiv.Style.Opacity = المعرف ؛ Bool = صحيح ؛ }}}}}} ؛ </script> <style> *{margin: 0 ؛ الحشو: 0 ؛ } a ، img {border: 0 ؛} ul {position: absolute ؛ أعلى: 20 بكسل ؛ اليسار: 30 بكسل ؛ Z-index: 100 ؛ } #ul li {display: inline block ؛ الموقف: قريب الارتفاع: 30 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 30 بكسل ؛ الحشو: 3px ؛ الحدود: 1 بكسل رمادي صلب. الحدود الحدودية: 10px 10px 0 0 ؛ خلفية اللون: أليس بلو ؛ المؤشر: مؤشر. -Webkit-transition: كل سهولة في الواجهة 0.3s ؛ -انتقال الأوز: كل ما في وسعه. -MS-Ransition: كل سهولة في الواجهة 0.3s ؛ -الرانس: كل ما في وسعه. الانتقال: كل سهولة في 0.3s ؛ } #ul li: hover {background-color: aquamarine ؛} .Nav-div {position: absolute ؛ العرض: 100 ٪ ؛ اليسار: -1px ؛ أعلى: 37 بكسل ؛ العرض: لا شيء ؛ الحدود: 1 بكسل رمادي صلب. أعلى الحدود: 0 ؛ الحدود الحدودية: 0 0 10px 10px ؛ خلفية اللون: أليس بلو ؛ . العرض: كتلة ؛ الحدود الحدودية: 0 0 10px 10px ؛ خلفية اللون: LightBlue ؛ -Webkit-transition: كل سهولة في الواجهة 0.3s ؛ -انتقال الأوز: كل ما في وسعه. -MS-Ransition: كل سهولة في الواجهة 0.3s ؛ -الرانس: كل ما في وسعه. الانتقال: كل سهولة في 0.3s ؛ Border-Bottom: 1 بكسل رمادي صلب ؛ . العرض: لا شيء ؛ الحدود الحدودية: 0 0 10px 10px ؛ Opitive: 0} .a {z -index: -1 ؛ العرض: كتلة ؛ تدمير النص: لا شيء ؛ الحدود الحدودية: 10px ؛ -Webkit-transition: كل سهولة في الواجهة 0.3s ؛ -انتقال الأوز: كل ما في وسعه. -MS-Ransition: كل سهولة في الواجهة 0.3s ؛ -الرانس: كل ما في وسعه. الانتقال: كل سهولة في 0.3s ؛ . إضافة ... </a> </viv> <span> مؤثرات خاصة أخرى+</span> <viv> <a href = ""> إضافة مستمرة ... </a> <a href = "" "> إضافة مستمر ... </a> <a href =" "" إضافة ... </a> <a href = " التحسين <viv> <span> Financial+</span> <viv> <a href = ""> عناوين اليوم </a> <a href = ""> All News </a> <A Href = "" أخبار </a> <a href = ""> مراجعة الماضي </a> </viv> </li> <li> أخبار اليوم <div> <span> Financial+</span> <viv> <a href = "" " </viv> <span> التكنولوجيا+</span> <viv> <a href = ""> عناوين اليوم </a> <a href = ""> جميع الأخبار </a> <a href = ""> مراجعة الماضي </a> </iv> </li> </ul> </html> </html>صورة التكاثر:
ما يلي هو التأثير الخاص الثاني: (التنفيذ المحدد أبسط بكثير من الأول ، ويولي اهتمامًا رئيسيًا لتخطيط CSS)
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </itlem> <style> *{margin: 0 ؛ الحشو: 0 ؛ } a ، img {border: 0 ؛} #menu {position: absolute ؛ أعلى: 30 بكسل ؛ اليسار: 0 ؛ اليمين: 0 ؛ الهامش: السيارات ؛ العرض: 400 بكسل ؛ الحدود اليسرى: 1 بكسل رمادي صلبة. أعلى الحدود: 1 بكسل رمادي صلبة. خلفية اللون: Lemonchiffon ؛ محاذاة النص: المركز ؛ } #menu li {style style: none ؛ تعويم: اليسار. العرض: 99px ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ يمين الحدود: 1 بكسل رمادي صلب ؛ خلفية اللون: Burlywood. اللون: أبيض. -الويبكيت ترانس: كل ما في وسع 0.5s ؛ -انتقال الأوز: كل ما في وسع 0.5s ؛ -MS-Ransition: كل سهولة في 0.5S ؛ -الرانس: كل ما في وسعه. الانتقال: كل سهولة في 0.5S ؛ } #menu li: hover {background-color: lemonchiffon ؛ اللون: #336699 ؛ . اليسار: -1px ؛ العرض: لا شيء ؛ العرض: 399px ؛ الارتفاع: 300 بكسل ؛ اللون: #336699 ؛ الحدود اليسرى: 1 بكسل رمادي صلبة. يمين الحدود: 1 بكسل رمادي صلب ؛ Border-Bottom: 1 بكسل رمادي صلب ؛ خلفية اللون: Lemonchiffon ؛ } </style> <script> window.onload = function () {var menu = document.getElementById ('menu') ؛ if (menu.addeventListener) {menu.addeventListener ('mouseover' ، show ، false) ؛ menu.addeventListener ('mouseout' ، إخفاء ، خطأ) ؛ } آخر إذا (menu.attachevent) {menu.attachevent ('onMouseover' ، show ، false) ؛ menu.attachevent ('onMouseout' ، إخفاء ، خطأ) ؛ } وظيفة عرض (حدث) {var target = event.target || event.srcelement ؛ if (target.tagname.toLowerCase () === 'li') {target.firstelementchild.style.display = 'block' ؛ } آخر if (target.parentNode.tagname.toLowerCase () === 'li') {target.style.display = 'block' ؛ }} دالة إخفاء (الحدث) {var target = event.target || event.srcelement ؛ if (target.tagname.toLowerCase () === 'li') {target.firstelementchild.style.display = 'none' ؛ } آخر if (target.parentNode.tagname.toLowerCase () === 'li') {target.style.display = 'none' ؛ }}} </script> </head> <body> <div id = "menu"> <ul> <li id = "menu1"> مؤثرات siufu الخاصة <div> 11111111111111111 </li> <li id = "menu2" id = "menu3"> المؤثرات الخاصة لـ Siufu 3 <DIV> 333333333333 </viv> </li> <li id = "menu3"> المؤثرات الخاصة لـ Siufu 3 <viv> 3333333333 </viv> </li> <li id = "mena4" </ul> </viv> </body> </html>صورة التكاثر:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.