لقد قمت اليوم بترميز اثنين من المؤثرات الخاصة الأخرى: أحدهما مصنوع من الإدخال الأصلي [Type = Range] ، والآخر مخصص تمامًا ؛ ما يلي هو الرمز الكامل والتوضيح:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> #tip {position: absolute ؛ أعلى: 30 بكسل ؛ اليسار: 0 ؛ اليمين: 0 ؛ العرض: 200 بكسل ؛ الارتفاع: 160 بكسل ؛ الهامش: السيارات ؛ الحدود: 1 بكسل رمادي صلب. خلفية اللون: Cornsilk ؛ } #tip div {الموضع: النسبي ؛ العرض: 100 ٪ ؛ الارتفاع: 80 بكسل ؛ Border-Bottom: 1 بكسل رمادي صلب ؛ } .out {الموضع: النسبي ؛ اليسار: 16 ٪ ؛ العرض: كتلة مضمنة. الحدود: 2 بكسل Solid RoyalBlue ؛ الهامش: 20 بكسل ؛ العرض: 130 بكسل ؛ الارتفاع: 20 بكسل ؛ خلفية اللون: Lightgoldenrodyellow ؛ } .in {display: block ؛ الارتفاع: 20 بكسل ؛ رفع الخط: 20 بكسل ؛ محاذاة النص: صحيح ؛ اللون: أبيض. العرض: 50 ٪ ؛ خلفية-صورة: الخط الخطي (إلى اليمين ، مسحوق 0 ٪ ،#336699 50 ٪ ، أحمر 0px 1px rgba (0 ، 0 ، 0 ، 0 ، 0 ، 0 ، أقحم ، 0px 1px rgba (0 ، 0 ، 0 ، 0 ، 0 ، RGBA (0 ، 0 ، 0 ، 0 ، 0 ، أقحم ، 0px 1px rgba (0 ، 0 ، 0 ، 0 ، 0 ، أقحم ، 0px 1px rgba (0 ، 0 ، 0 ، 0 ، 0.6) inset ؛ background-color: lightkyBlue ؛ الارتفاع:} 0 -px inset inset ؛ Background-Color: Postkyblue ؛ document.getElementByid (inner1 ') ؛ inner.style id ، id1 inner2.style Function () {console.log ("+A+" إذا كانت القيمة <100) {value ++ ؛ ClearTimeOut (id1) ؛ id = "inner1"> 50 </span> </span> <input id = "range" type = "range" min = "0" max = "100" step = "1" value = "50"> </div> <div id = "d2"> <input id = "btn1" type = "button" id = "btn2" type = "button" value = ">"> </viv> اضغط مع الاستمرار على الزر لمدة 0.5 ثانية ، وسوف يستمر في التغيير!التنفيذ الأول بسيط للغاية ، لذلك لن أشرح ذلك ، اقرأ الكود بنفسي ؛
هنا نقدم بشكل أساسي تنفيذ المثال الثاني:
عندما نرى مطلبًا أو مؤثرات خاصة لأشخاص آخرين ، لا تتسرع لرؤية رمز الآخرين. أولا فكر في الأمر ، كيف يجب أن تحقق ذلك؟ ضع أفكارك أولاً
مبدأ التنفيذ لهذا التأثير الخاص:
1. تعشش فترة داخل فترة ؛
• خارج الفترة: عرض العرض فقط ، الطول ، الحدود ، لا خلفية
• تمتد من الداخل: الارتفاع هو نفسه الخارج ، والعرض هو 50 ٪ بشكل افتراضي. قم أولاً بتعيين لون الخلفية على التدرج الخطي
2. حدث OnClick للزر بسيط نسبيًا. انقر فوقه لتغيير عرض الفترة من الداخل وعرض الرقم.
3. عندما يتم onMousedown الزر ، ابدأ الموقت وقم بتنفيذ وظيفة تغيير الوظيفة بعد 500 مللي ثانية. وظيفة التغيير هي وظيفة تستدعي نفسها مع setTimeout. سيتم الاتصال مرة أخرى بدون 16.7 مللي ثانية لتحقيق تأثير الرسوم المتحركة.
تحليل صعوبة:
1. هذه الجملة var a = parsefloat (window.getComputedStyle (Outer2 ، null) .width)/100 ؛
تستخدم للحصول على القيمة الأولية إذا كنت تستخدم OUTER2.STYLE.WIDTH
لا يستحق ذلك ، بالطبع يمكنك أيضًا تعيين قيمة ثابتة ، على سبيل المثال ، يمكن تعيينها هنا
var a = 1.3 ،
لاحظ أن طريقة getComputedStyle غير مدعومة بموجب IE9.
كائن عنصر IE لديه خاصية CurrentStyle ؛
2. هذه الجملة
btn1.onmouseup = function () {clearTimeOut (id1) ؛
ClearTimeOut (id)} ؛
إنه أمر مهم للغاية. وبدون ذلك ، سيتم تشغيل Onmosedown قبل تشغيل Onclick. بعد 500 مللي ثانية ، سيبدأ التنفيذ ، ثم سيتم تنفيذ الموقت الخارجي ؛
3. لا شيء آخر صعب ؛
يمتد هذا المثال فعليًا إلى العديد من التطبيقات الأخرى ، مثل استبدال الشاشة الوسطى بالمقالات والصور ، وما إلى ذلك ، ثم استبدال الزر مع التسلسلات المخصصة ، سيكون التأثير رائعًا!
إذا كنت تعتقد أن لدي شيئًا سيئًا في الكتابة ، فيرجى الإشارة إلى ذلك!
المثال البسيط أعلاه للقتال العملي JavaScript (النطاق الأصلي والمؤثرات الخاصة المخصصة) هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.