البيان: يعتمد العرض التوضيحي على مؤسسة تدريبية وهو ممتن للغاية لهذا الهيكل التدريبي. بدون مزيد من اللغط ، سنبدأ الآن في تغيير إنتاج العرض التوضيحي.
بادئ ذي بدء ، في عملية التعلم في الواجهة الأمامية ، تعتبر صور carousel شيءًا يجب أن نتعلمه ، لذلك من أجل تنفيذ صور carousel المختلفة بشكل أكثر كفاءة ، يتم تغليف إطار حركة.
وظيفة getStyle (obj ، attr) {if (obj.currentStyle) {return obj.currentStyle [attr] ؛ // من أجل الحصول على قيمة السمة ضمن ie} else {return window.getjectedStyle (obj ، null) [attr] ClearInterval (Obj.timer) ؛ obj.timer = setInterval (function () {var flag = true ؛ var current = 0 ؛ for (var attr in json) {if (attr == 'opitive') {current = parseint (getStyle (obj ، attr)*100) ؛ Math.ceil (الخطوة): Math.Floor (الخطوة) خطوة) + ') ClearInterval (obj.timer) ؛يتوافق هذا الإطار مع متصفحات مختلفة ويسمح بخصائص مثل العتامة و z-ond. مع هذا الإطار ، يمكنك تحقيق نتائج رائعة. حتى الآن نبدأ في القيام العرض التوضيحي رسميًا.
أولاً ، إنتاج index.html.
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </liv>
إنتاج index.html بسيط للغاية. سنقوم بإدخال الصورة كصورة خلفية لـ LI في JavaScript. بعد ذلك ، نقوم بضبط نمط CSS.
*{الهامش: 0px ؛ الحشو: 0px ؛ } #box {width: 1300px ؛ الارتفاع: 400 بكسل ؛ الهامش: 100px Auto ؛ الفائض: مخفي. } #box ul {height: 400px ؛ العرض: 1300 بكسل ؛ } #box ul li {width: 240px ؛ الارتفاع: 400 بكسل ؛ تعويم: اليسار. الفائض: مخفي. }رمز JavaScript على النحو التالي:
window.onload = function () {var box = document.getElementById ('box') ؛ var ali = box.children [0]. لـ (var i = 0 ؛ i <ali.length ؛ i ++) {ali [i] .style.backgroundimage = 'url (' + 'images/' + (i + 1) + '.jpg' ؛ ali [i] .onmouseover = function () {for (var i = 0 ؛ ANIMATE (هذا ، {العرض: 800}) ؛وبهذه الطريقة ، يتحقق عرض Bellows Effect الذي تم تنفيذه باستخدام JS الأصلي. بطبيعة الحال ، يمكن أيضًا استخدام الإطار المتحرك المغلف لتحقيق تأثيرات الكاروسيل المشابهة لـ Netease.
المقالة أعلاه عبارة عن عرض تجريبي على غرار Bellows الذي يقوم بتطبيق إطار رياضي (رمز مثال) ويغلف إطار عمل رياضي (رمز مثال) وهو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.