Aujourd'hui, j'ai écrit sur l'effet de plancher moi-même, j'étais un peu irritable et j'ai fait des erreurs en petits endroits. Chers maîtres, je n'ai pas assez modifié! ! !
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> commutateur de plancher </ title> <style> * {padding: 0; margin: 0;} li {list-style: Aucun;}. Main img {width: 850px; height: 700px; float: left; Left;}. 850px; hauteur: 50px; Text-Align: Center; Line-Height: 50px;}. Floor {Position: Fixed; Top: 20px; Droite: 20px; Affichage: Aucun;}. Floor ul Li {Width: 70px; Height: 30px; Text-Adign: Center; Line-Height: BackyPx; Cursor: Hand; CurSor: Pointer} .Lesyle}. Red;}. Chargement {Background: URL ("Image / Loading.gif") Center Center sans répétition;} # Back {Cursor: Hand; Cursor: Pointer;} </ Style> </ Head> <Body> <div Id = "Main"> <h3> Image Appréciation </h3> <Img as = "Image / 1.jpg" /> <img As = "Image / 2.jpg" 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 = "image / 9.jpg" /> <img " 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 = "image / 4.jpg" /> <img "/> <img" as = "image / 4.jpg" /> <img "/> <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 = "image / 10.jpg" /> <img "/> <img as =" image / 10.jpg "/> <li> d'abord </ li> top </p> </div> <cript> var main = document.getElementById ("main"); var plancher = document.getElementById ("plancher"); var image = main.getElementsByTagName ("img"); var floorul = document.getElementById ("Floorul"); var li = landul.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 = "chargement"; if (delay (image [i]). top <scrolltop + height) {image [i] .src = image [i] .getAttribute ("as"); }} if (scrolltop> = image [0] .offSetTop) {plancher.style.display = "block"; } else {plancher.style.display = "Aucun"; } 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] .offsetop; 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); }} time = setInterval (Goback, 1); } Fonction Delay (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>L'exemple simple ci-dessus de JS réalisant les effets de sol est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.