이 기사의 예제는 참조에 대한 JS 원활한 스크롤 효과를 구현하기위한 코드를 공유합니다. 특정 내용은 다음과 같습니다
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll </title> <style> #warp {width : 1200px; 높이 : 300px; 오버플로 : 숨겨진; 마진 : 100px auto 0; } #warp #con {너비 : 4000px; 높이 : 300px; 오버플로 : 숨겨진; } #warp #con #box1 {float : 왼쪽; 오버플로 : 숨겨진; } #warp #con #box2 {float : 왼쪽; 오버플로 : 숨겨진; } #Warp img {float : 왼쪽; 너비 : 200px; 높이 : 300px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2.jpg"> <img src = "images/meinv3.jpg"> <image src = "image/meinv4. <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <cript> var warp = document.getElementById ( 'warp'); var con = document.getElementById ( 'con'); var box1 = document.getElementById ( 'box1'); var box2 = document.getElementById ( 'box2'); // box2.innerhtml = box1.innerhtml; var timer1 = null, x = 0; 함수 scroll () {// scroll function box2.innerhtml = box1.innerhtml; timer1 = setInterVal (function () {x ++; if (x> = box1.clientWidth) {x = 0; warp.scrollleft = x;} warp.scrollleft = x;}, 10)} scroll (); Warp.onmouseEnter = function () {clearInterval (timer1); } warp.onmouseleave = function () {scroll (); } </script> </body> </html>이 효과의 주요 아이디어는 그림의 내용 너비가 표시 될 영역의 너비보다 훨씬 커서 스크롤 막대가 나타나는 것입니다. 이전 사진 그룹의 내용을 복사하여 효과를 원활하게 스크롤하게합니다. 자세한 내용은 코드를 참조하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.