Сегодня я сам написал о эффекте пола, я был немного раздражительным и допустил ошибки в небольших местах. Дорогие мастера, я недостаточно модифицировал! ! !
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Teled> переключатель пола </title> <style>*{Padding: 0; Margin: 0;} li {Список-стиль: none;}. 850px; Высота: 50px; Text-align: Center; Line-Height: 50px;}. Пол {положение: фиксирован; RED;}. Загрузка {фон: url ("Image/load.gif") Центр без повторного перепорачивания;}#Back {coursor: hand; cursor: pointer;} </style> </head> <body> <div Id = "main"> <h3> picture carrication </h3> <img as = "Image/1.jpg"/> <img as = "/img as =" Image/1.jpg "/> <img as ="/img as = "Image/1.jpg"/> <h3> as = "image/3.jpg"/> <img as = "image/4.jpg"/> <img as = "image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "Image/7.gif"/> <img as = "image/8.jpg"/> <img as = ". 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 "/> <img" As = "/4. as = "Image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "image/7.gif"/> <img as = "image/8.jpg"/> <img as = "Image/10.jpg"/> <img "/> <img as =" Image/10.jpg "/> <li> first </li> </> <P> <P> <P> 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; for (var i = 0; i <image.length; i ++) {image [i] .classname = "загрузка"; if (Delay (image [i]). Top <scrolltop + height) {image [i] .src = image [i] .getAttribute ("as"); }} if (scrolltop> = image [0] .OffSetTop) {flure.style.display = "block"; } 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 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); } function Delly (obj) {var l = 0; var t = 0; while (obj) {l = l + obj.offsetleft; t = t + obj.offsettop; obj = obj.offsetParent; } return {Left: l, top: t}; } </script> </body> </html>Приведенный выше простой пример JS достигает эффектов пола - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.