ทุกคนเห็นมู่ลี่! ดังที่แสดงในภาพ:
หลักการ:
ดังที่แสดงในรูปที่ตาข่ายกลวงเป็นเหมือน LI แต่ละตัว ตั้งค่าแอตทริบิวต์การวางตำแหน่งสัมพัทธ์สำหรับมันและตั้งค่าล้น: ซ่อน; Black Block เป็นองค์ประกอบเด็ก LI ที่มีความสูง 2 เท่าของ LI และตั้งค่าแอตทริบิวต์สัมบูรณ์ เราต้องการเปลี่ยนค่าสูงสุดเพื่อให้ได้การเปลี่ยนแปลง! (บล็อกพิเศษที่มุมขวาบนไม่มีส่วนเกี่ยวข้องกับภาพนี้)
การวิเคราะห์เลย์เอาต์:
โปรดทราบว่าด้านบนคุ้มค่าที่จะเปลี่ยนแปลง! เมื่อค่าเริ่มต้น = 0 คือ 0 จะแสดง "ชั้นแรกชั้นบน" เมื่อ top = -40px องค์ประกอบของเด็กของ Li จะถูกเลื่อนไปถึง 40px ในเวลานี้เนื้อหาที่แสดงคือ "ชั้นล่างชั้นล่าง" หมายเหตุ Div Layer P-Element
การวิเคราะห์ JS:
1. เปิดตัวจับเวลาหลายตัวเพื่อให้ได้เอฟเฟกต์
2. ดำเนินการในทิศทางตรงกันข้าม
3. ทำแบบฝึกหัดหลายชุด
4. การสะสมสร้างความรู้สึกของการส่าย
5. สร้างภาพเคลื่อนไหวช่วงเวลา
รหัส JS มีดังนี้:
<script> window.onload = function () {var oul = document.getElementById ('ul1'); var Oul2 = document.getElementById ('UL2'); Toshow (OUL); // ดำเนินการ settimeout (function () {toshow (oul2);}, 4000); ฟังก์ชั่น toshow (obj) {var adiv = obj.getElementsByTagname ('div'); var inow = 0; ตัวจับเวลา var = null; var bbtn = true; setInterval (function () {tochange ();}, 2000); ฟังก์ชั่น tochange () {timer = setInterval (ฟังก์ชัน () {ถ้า (inow == adiv.length) {clearInterval (ตัวจับเวลา); inow = 0; bbtn =! bbtn;} อื่นถ้า (bbtn) {startmove (adiv [inow] i = 0; - // ฟังก์ชั่นเฟรมการเคลื่อนไหว startmove (obj, json, endfn) {clearinterval (obj.timer); obj.timer = setInterval (function () {var bbtn = true; สำหรับ (var attr ใน json) {var icur = 0; icur = parseint (getstyle (obj, attr)) || 0; var ispeed = (json [attain] - icur)/8; if (icur! = json [attr]) {bbtn = false; } // รับฟังก์ชั่นสไตล์ที่ไม่ใช่บรรทัด getStyle (obj, attr) {ถ้า (obj.currentstyle) {return obj.currentstyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }} </script>ดาวน์โหลดที่อยู่: JS เพื่อให้ได้มู่ลี่
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเรียนรู้ที่จะตระหนักถึงผลกระทบของมู่ลี่ JS