لقد رأى الجميع الستائر! كما هو موضح في الصورة:
مبدأ:
كما هو مبين في الشكل ، فإن الشبكة المجوفة مثل كل لي. تعيين سمات تحديد المواقع النسبية لذلك وتعيين الفائض: مخفي ؛ Black Block عبارة عن عنصر طفل LI يبلغ ارتفاعه 2 أضعاف LI ، وتعيين السمة المطلقة. نريد تغيير قيمتها العليا للحصول على التغييرات! (الكتلة الإضافية في الزاوية اليمنى العليا لا علاقة لها بهذه الصورة)
تحليل التصميم:
لاحظ أن القمة تستحق التغيير! عندما يكون الجزء العلوي الافتراضي = 0 هو 0 ، يتم عرض "الطابق الأول في الطابق العلوي". عندما يتم نقل TOP = -40 بكسل ، يتم تحريك عناصر LI للطفل حتى 40 بكسل. في هذا الوقت ، يكون المحتوى المعروض هو "الطابق الأول في الطابق السفلي". لاحظ طبقة العنصر p div
تحليل JS:
1. قم بتشغيل أجهزة ضبط الوقت المتعددة لتحقيق التأثير
2. تنفيذ في الاتجاه المعاكس
3. أداء مجموعات متعددة من التمارين
4. التراكم يخلق شعورًا مذهلاً
5. توليد الرسوم المتحركة الفاصلة الزمنية
رمز JS كما يلي:
<script> window.onload = function () {var oul = document.getElementById ('ul1') ؛ var oul2 = document.getElementById ('ul2') ؛ توشو (oul) ؛ // execute setTimeOut (function () {toshow (oul2) ؛} ، 4000) ؛ دالة toshow (obj) {var adiv = obj.getElementSbyTagName ('div') ؛ var inow = 0 ؛ var timer = null ؛ var bbtn = true ؛ setInterval (function () {tochange () ؛} ، 2000) ؛ دالة tochange () {timer = setInterval (function () {if (inow == adiv.length) {clearinterval (timer) ؛ inow = 0 ؛ bbtn =! bbtn ؛} آخر i = 0 ؛ }}}} ؛ // motion frame function startMove (obj ، json ، endfn) {clearinterval (obj.timer) ؛ obj.timer = setInterval (function () {var bbtn = true ؛ for (var attr in json) {var icur = 0 ؛ icur = parseint (getStyle (obj ، attr)) || 0 ؛ var isPeed = (json [attr] - icur)/8 ؛ ispeed = isPeed> 0؟ math.ceil (iSpeed): math. if (icur! = attr]) {bbtn = false ؛ } // الحصول على وظيفة نمط غير خط getStyle (obj ، attr) {if (obj.currentStyle) {return obj.currentStyle [attr] ؛ } آخر {return getComputedStyle (obj ، false) [attr] ؛ }} </script>عنوان التنزيل: JS لتحقيق الستائر
ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون من المفيد للجميع أن يتعلموا تحقيق تأثير الستائر JS.