วันนี้ฉันเขียนเกี่ยวกับเอฟเฟกต์พื้นด้วยตัวเองฉันรู้สึกหงุดหงิดเล็กน้อยและทำผิดพลาดในสถานที่เล็ก ๆ เรียนอาจารย์ฉันไม่ได้ดัดแปลงพอ! - -
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> สวิตช์พื้น </title> <style>*{padding: 0; margin: 0;} li {list-style: ไม่มี; 850px; ความสูง: 50px; Text-Align: Center; Line-Height: 50px;}. Floor {ตำแหน่ง: คงที่; ด้านบน: 20px; ขวา: 20px; แสดง: ไม่มี;}. พื้น ul li {width: 70px; ความสูง: 30px; สีแดง;}. การโหลด {พื้นหลัง: url ("image/loading.gif") ศูนย์กลางที่ไม่มีการทำซ้ำศูนย์;}#back {เคอร์เซอร์: Hand; Cursor: Pointer;} </style> </head> <body> <div id = "main"> <h3> AS = "image/3.jpg"/> <img as = "image/4.jpg"/> <img as = "image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "7.gif"/> <img as = "image/8.jpg"/> AS = "image/10.jpg"/> <img as = "image/10.jpg"/> <img as = "image/10.jpg"/> <img as = "image/10.jpg"/> <img as = "image/10.jpg"/> <img as = "image/2"/> <img "/> AS = "image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "image/7.gif"/> <img as = "image/8.jpg"/> <img as = "10.jpg"/> <img "/> ด้านบน </p> </div> <script> var main = document.getElementById ("หลัก"); var floor = document.getElementById ("ชั้น"); var image = main.getElementsByTagname ("IMG"); var flooral = document.getElementById ("floorul"); var li = floor.getElementsByTagname ("li"); var back = document.getElementById ("back"); window.onload = window.onscroll = function () {var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var height = document.documentelement.clientheight || document.body.clientheight; สำหรับ (var i = 0; i <image.length; i ++) {image [i] .className = "โหลด"; if (delay (image [i]). top <scrolltop + ความสูง) {image [i] .src = image [i] .getAttribute ("เป็น"); }} if (scrolltop> = image [0] .offSettop) {floor.style.display = "block"; } else {floor.style.display = "ไม่มี"; } var num = 0; สำหรับ (var i = 0; i <image.length; i ++) {ถ้า (scrolltop> = image [i] .offSettop) {num = i; } li [i] .className = ""; } li [num] .className = "listyle"; สำหรับ (var i = 0; i <li.length; i ++) {li [i] .onclick = function () {สำหรับ (var j = 0; j <li.length; j ++) {ถ้า (นี่ == li [j]) {document.documentelement.scrolltop = image [j] document.body.scrolltop = image [j] .offsettop; }}}}}} var time = null; back.onclick = function () {function goBack () {var ss = document.documentelement.scrolltop || document.body.scrolltop; SS- = 50; document.documentelement.scrolltop = SS; document.body.scrolltop = ss; if (ss <= 0) {clearInterval (เวลา); }} time = setInterval (goBack, 1); } ฟังก์ชั่นการหน่วงเวลา (obj) {var l = 0; var t = 0; ในขณะที่ (obj) {l = l + obj.offsetleft; t = t + obj.offsettop; obj = obj.offsetparent; } return {left: l, top: t}; } </script> </body> </html>ตัวอย่างง่ายๆข้างต้นของ JS ที่ได้รับเอฟเฟกต์พื้นคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น