Hoje escrevi sobre o efeito do chão, fiquei um pouco irritado e cometi erros em pequenos lugares. Caros mestres, não modifiquei o suficiente! ! !
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> switch de piso </title> <style>*{preenchimento: 0; margem: 0; 850px; altura: 50px; alinhamento de texto: centro; altura da linha: 50px;}. Piso {Posição: fixo; topo: 20px; direita: 20px; display: nenhum;}. Piso ul li {width: 70px; altura: 30px; text-align: center; li) {30px; Red;}. Carregando {Background: Url ("Image/Loading.gif") Centro de centro de repetição;}#Back {Cursor: Hand; Cursor: Pointer;} </style> </ad Head> <Body> <div Id = "Main"> <H3> Imagem Apreciação </h3> <iMg>///1.jp = "Maior"> <H3> Image AS = "Image/3.jpg"/> <img como = "Image/4.jpg"/> <img como = "Image/5.jpg"/> <img como = "image/6.jpg"/> <img como = "image/7.gif"/> <img como = "imagem/8.jpg"/> <img como = ". as = "Image/10.jpg"/> <img como = "image/10.jpg"/> <img como = "imagem/10.jpg"/> <img como = "image/10.jpg"/> <img como = "image/10.jpg"/> <img como = "imagem/2"/> <iMG>/> <MG ", como "g/"g/> <img"/"), "g/"g "g/"g/10.jpg"/> <img como = "imagem/2"/> <iMg "/> <IMG", ", "g/"g/"g "g/" e "g ", "g/"g "g/" e "g ", "g/"g "g/"g/10 <g 10.jpg"/> <img como "imagem/2"/> <iMG>/> <img "," AS = "Image/5.jpg"/> <img como = "imagem/6.jpg"/> <img como = "image/7.gif"/> <img como = "image/8.jpg"/> <img como = "image/10.jpg"/> <mg "/> <img como =" image/10.jpg "/> <li> <li> <li> <li> <li> <mirt) <li> <bring) <mg/"> <.jpg "<lpg"/> <mg "/> <img como =" image/10.jpg "/> <li> <li> <li> <li> <li> <mg" <mg ") top </p> </div> <cript> var main = document.getElementById ("main"); var piso = document.getElementById ("piso"); var imagem = main.getElementsByTagName ("img"); var pisoL = document.getElementById ("piso"); var li = pisol.getElementsByTagName ("li"); var back = document.getElementById ("back"); window.onload = window.onscroll = function () {var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; var a altura = document.documentElement.clientHeight || document.body.clientHeight; for (var i = 0; i <image.length; i ++) {imagem [i] .className = "carregando"; if (atraso (imagem [i]). top <scrolltop + altura) {imagem [i] .src = imagem [i] .getAttribute ("como"); }} if (scrolltop> = imagem [0] .offsetTop) {piso.style.display = "bloqueio"; } else {piso.style.display = "nenhum"; } var num = 0; for (var i = 0; i <image.length; i ++) {if (scrolltop> = imagem [i] .offSettop) {num = i; } li [i] .className = ""; } li [num] .className = "listyle"; para (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.scrolloTop = imagem [j] .offsettop; document.body.scrolltop = imagem [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 (tempo); }} time = setInterval (Goback, 1); } atraso da função (obj) {var l = 0; var t = 0; while (obj) {l = l + obj.offsetleft; t = t + obj.OffSettop; obj = obj.offsetParent; } retornar {esquerda: l, topo: t}; } </script> </body> </html>O exemplo simples acima do JS que atinge os efeitos do piso é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.