오늘 나는 바닥 효과에 대해 썼다. 나는 약간 짜증이 났고 작은 곳에서 실수를했다. 친애하는 마스터, 나는 충분히 수정되지 않았습니다! ! !
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 플로어 스위치 </title> <style>*{padding : 0; 마진 : 0;} li {Listyle : none;}. 메인 IMG {width : 850px; : 700px; 50px; 텍스트-홀인 : 중앙; 선-높이 : 50px;}. 바닥 {위치 : 고정; 고정; 상단 : 20px; 오른쪽 : 20px; 디스플레이 : 없음;}. 바닥 울 리 {너비 : 70px; RED;}.로드 {배경 : URL ( "Image/Loading.gif") No-Repeat Center;}#back {cursor : hand; cursor : cursor : pointer;}} </style> </head> <div id = "main"> <h3> 그림 감히 </h3> <img as = "im as = "image/3. jpg"/> <img as = "image/4. jpg"/> <img as = "image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "image/7. 7.gif"/> <img as = "image/8.jpg"/> as = "image/9.jpg"/> <img as = "image/10.jpg"/> <img as = "im as = "image/5.jpg"/> <img as = "image/6.jpg"/> <img as = "image/7.gif"/<img as = "im top </p> </div> <cript> 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 = wind 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) {floor.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; 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); } 함수 지연 (OBJ) {var l = 0; var t = 0; while (obj) {l = l + obj.offsetleft; t = t + obj.offsetTop; obj = obj.offsetparent; } return {왼쪽 : l, 상단 : t}; } </script> </body> </html>바닥 효과를 달성하는 JS의 위의 간단한 예는 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.