Hoy escribí sobre el efecto del piso yo mismo, estaba un poco irritable y cometí errores en lugares pequeños. Queridos maestros, ¡no he modificado lo suficiente! ! !
<! DocType html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> Switch de piso </title> <style>*{Padding: 0; margin: 0;} li {list-style: Ninguno;}. IMG Main {width: 850px; altura: 700px; float: izquierda;}. 850px; altura: 50px; Text-Align: Center; Line-Height: 50px;}. Floor {Position: Fixed; Top: 20px; Right: 20px; Display: Ninguno;}. Floor Ul Li {ancho: 70px; Height: 30px; Text-Align: Centolor; rojo;}. Cargando {fondo: url ("image/loading.gif") no-repeat centro centro;}#back {cursor: hand; cursor: pointer;} </style> </head> <body> <diM id = "main"> <h3> Imagen de apreciación </h3> <img as = "Image/1.jpg"/> <img as = "Image/" Image/"iMggg/</h3 as = "imagen/3.jpg"/> <img as = "image/4.jpg"/> <img as = "image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "image/7.gif"/> <img as = "imagen/8.jpg"/> <img as = "image/9.jpg"/> <imgg " as = "imagen/10.jpg"/> <img as = "image/10.jpg"/> <img as = "image/10.jpg"/> <img as = "imagen/10.jpg"/> <img as = "image/10.jpg"/> <img as = "image/2"/> <img "/> <img" as = "imagen/4.jpg"/>>> as = "imagen/5.jpg"/> <img as = "imagen/6.jpg"/> <img as = "imagen/7.gif"/> <img as = "imagen/8.jpg"/> <img as = "imagen/10.jpg"/> <img "/> <img as =" image/10.jpg "/> <li> primero </li> </</p id =" top </p> </div> <script> var main = document.getElementById ("main"); var piso = document.getElementById ("piso"); var imagen = main.getElementsBytagName ("img"); var floor = document.getElementById ("Floor"); var li = floor.getElementsBytagName ("li"); var back = document.getElementById ("Back"); Window.Onload = Window.onscroll = function () {var scrollTop = document.documentelement.scrolltop || document.body.scrolltop; var altura = document.documentelement.clientHeight || document.body.clientHeight; for (var i = 0; i <image.length; i ++) {image [i] .classname = "cargar"; if (demora (imagen [i]). TOP <ScrollTop + Height) {Image [i] .src = Image [i] .getAttribute ("as"); }} if (scrollTop> = image [0] .Offsettop) {floor.style.display = "bloque"; } else {floor.style.display = "none"; } var num = 0; for (var i = 0; i <image.length; i ++) {if (scrolltop> = image [i] .OffSettop) {num = i; } li [i] .classname = ""; } li [num] .classname = "listyle"; for (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 = image [j] .offsettop; document.body.scrolltop = image [j] .OffSettop; }}}}}} var time = null; back.OnClick = function () {function Goack () {var ss = document.documentelement.scrolltop || document.body.scrolltop; SS- = 50; document.documentelement.scrolltop = ss; document.body.scrolltop = ss; if (ss <= 0) {ClearInterval (tiempo); }} time = setInterval (Goback, 1); } retraso de función (obj) {var l = 0; var t = 0; while (obj) {l = l + obj.offsetleft; t = t + obj.offsettop; obj = obj.OffSetParent; } return {izquierda: l, top: t}; } </script> </body> </html>El simple ejemplo simple de JS logrando efectos del piso es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.