Hari ini saya menulis tentang efek lantai sendiri, saya sedikit mudah tersinggung dan membuat kesalahan di tempat -tempat kecil. Dear Masters, saya belum cukup memodifikasi! Lai Lai
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> switch lantai </iteme> <tyle>*{padding: 0; margin: 0;} li {List-style: none;}. IMG utama {width: 850px; 700px: 700px: none; 50px; Text-Align: Center; Line-Height: 50px;}. Lantai {posisi: diperbaiki; atas: 20px; kanan: 20px; tampilan: tidak ada;}. Floor ul li {width: 70px; tinggi: 30px; Text-align: center; line-height: 30px; Cursor: Hand; Hand; Hand; Red;}. Memuat {latar belakang: url ("Image/Loading.gif") No-Repeat Center Center;}#back {kursor: hand; kursor: pointer;} </style> </head> <body> <v id = "main"> <h3> apresiasi gambar </h3> <img as = "Image/1.Jpg =" Image/Image/Image </H3> <IMG AS = "Image/" Main "> <H3> gambar </h3> <img as =" Image/"Main"> <h3> gambar </h3> <img as = "Image/" ijpg as = "gambar/3.jpg"/> <img as = "gambar/4.jpg"/> <img as = "gambar/5.jpg"/> <img as = "gambar/6.jpg"/> <img as = "gambar/7.gif"/> <img as = "gambar/8.jpg"/<img as = "gambar/9." Gambar as = "gambar/10.jpg"/> <img as = "gambar/10.jpg"/> <img as = "gambar/10.jpg"/> <img as = "gambar/10.jpg"/> <img as = "gambar/10.jpg"/> <img as = "gambar/2"/<img "/10 iMg"/<iMg AS = " as = "gambar/5.jpg"/> <img as = "gambar/6.jpg"/> <img as = "image/7.gif"/> <img as = "gambar/8.jpg"/> <img as = "gambar/10.jpg"/> <img "/<img as =" Image/10.jpg "/> <per/" "Ul> <iMg as =" Image/10.jpg "/> <per/" " top </p> </div> <script> var main = document.geteLementById ("main"); var floor = document.getElementById ("floor"); var Image = Main.getElementsByTagname ("img"); var floorul = document.getElementById ("floorul"); var li = floorul.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; untuk (var i = 0; i <image.length; i ++) {image [i] .className = "memuat"; if (tunda (gambar [i]). Top <scrolltop + height) {gambar [i] .src = gambar [i] .getAttribute ("as"); }} if (scrolltop> = gambar [0] .offsettop) {floor.style.display = "block"; } else {floor.style.display = "none"; } var num = 0; untuk (var i = 0; i <image.length; i ++) {if (scrolltop> = gambar [i] .offsettop) {num = i; } li [i] .className = ""; } li [num] .className = "listyle"; untuk (var i = 0; i <li.length; i ++) {li [i] .onClick = function () {for (var j = 0; j <li.length; j ++) {if (this == li [j]) {document.documentelement.scrolltop = gambar [j] .offsettop; document.body.scrolltop = gambar [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 (waktu); }} waktu = setInterval (goback, 1); } function delay (obj) {var l = 0; var t = 0; while (obj) {l = l + obj.offsetleft; t = t + obj.offsettop; obj = obj.offsetparent; } return {left: l, atas: t}; } </script> </body> </html>Contoh sederhana di atas JS yang mencapai efek lantai adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.