Setiap orang telah melihat tirai! Seperti yang ditunjukkan pada gambar:
prinsip:
Seperti yang ditunjukkan pada gambar, kisi berongga seperti masing -masing li. Atur atribut penentuan posisi relatif untuk itu dan atur overflow: tersembunyi; Blok hitam adalah elemen anak Li dengan ketinggian 2 kali Li, dan mengatur atribut absolut. Kami ingin mengubah nilai teratasnya untuk mendapatkan perubahan! (Blok tambahan di sudut kanan atas tidak ada hubungannya dengan gambar ini)
Analisis tata letak:
Perhatikan bahwa atasan layak diubah! Ketika atasan default = 0 adalah 0, "lantai pertama di lantai atas" ditampilkan. Ketika top = -40px, elemen anak LI dipindahkan hingga 40px. Pada saat ini, konten yang ditampilkan adalah "lantai pertama di lantai bawah". Perhatikan Lapisan P-Element Div
Analisis JS:
1. Nyalakan beberapa timer untuk mencapai efeknya
2. Jalankan ke arah yang berlawanan
3. Lakukan beberapa set latihan
4. Akumulasi menciptakan rasa mengejutkan
5. Hasilkan Animasi Interval Waktu
Kode JS adalah sebagai berikut:
<script> window.onload = function () {var oul = document.geteLementById ('ul1'); var oul2 = document.getElementById ('UL2'); toshow (oul); // jalankan setTimeout (function () {toshow (oul2);}, 4000); function toshow (obj) {var adiv = obj.geteLementsByTagname ('div'); var inow = 0; var timer = null; var bbtn = true; setInterval (function () {tochange ();}, 2000); function tochange () {timer = setInterval (function () {if (inow == adiv.length) {clearInterval (timer); inow = 0; bbtn =! bbtn;} else if (bbtn) {startMove (adiv [inow], {top: 0}, function () {document. i = i <p.length; i ++) {p [i] .style.background = 'merah' }}}}; // Fungsi Bingkai Gerakan 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.floor(iSpeed); if (icur! } // Dapatkan fungsi gaya non-line Getstyle (obj, attr) {if (obj.currentstyle) {return obj.currentstyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }} </script>Download Address: JS untuk mencapai tirai
Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk belajar menyadari efek dari JS Blinds.