이 기사에서는 순수한 JS 모드에서 스크롤 광고의 효과를 알고 있습니다.
완제품을 먼저 보여 봅시다.
우선, 웹 페이지 스타일 :
#demo {배경 : #fff; 오버플로 : 숨겨진; 국경 : 1px 점선 #ccc; 너비 : 1280px; 높이 : 200px; } #demo img {테두리 : 3px 고체 #f2f2f2; } #indemo {float : 왼쪽; 너비 : 800%; } #demo1 {float : 왼쪽; } #demo2 {float : 왼쪽; }레이아웃은 다음과 같습니다.
<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/> </a> <a href = "#"> <img src = "banner2.jpg"/>> <div id = </div> </div> </div> <div id = "/div> <div id ="</div> <div id = "#">
특정 JS 구현 :
<cript> var speed = 10; var tab = document.getElementById ( "데모"); var tab1 = document.getElementById ( "demo1"); var tab2 = document.getElementById ( "demo2"); tab2.innerhtml = tab1.innerhtml; 함수 marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidth else {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onmouseOver = function () {clearInterVal (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, speed)}; </스크립트>여기에 주목해야 할 것은 다음과 같습니다.
Scrollleft는 페이지가 스크롤 바를 사용하여 오른쪽으로 스크롤 할 때 스크롤바의 왼쪽에 숨겨진 페이지 너비를 나타냅니다.
OffsetWidth는 객체의 가시 너비로 스크롤 막대를 감싸고 가장자리와 동일하므로 창의 디스플레이 크기에 따라 변경됩니다.
setInterVal () 메소드는 지정된 기간 (밀리 초)에 따라 함수를 호출하거나 표현식을 계산할 수 있습니다. setInterVal () 메소드는 clearInterVal ()가 호출되거나 창이 닫힐 때까지 함수를 계속 호출합니다.
이 특정 구현을 이해하면 이해하기 쉽습니다.
구현 원리는 다음과 같습니다. 먼저 스크롤 해야하는 컨텐츠의 사본을 복사하십시오. 오른쪽의 DIV에 의해 표시되는 내용이 왼쪽 그림자에 숨겨진 내용과 동일한 너비 인 경우, 상위 컨테이너의 왼쪽 그림자에 숨겨진 내용이 표시되므로 왼쪽 그림자에 숨겨져있는 내용이 표시되고 오른쪽에 숨겨진 내용이 다시 표시됩니다. 오른쪽에있는 내용이 왼쪽에 숨겨진 내용보다 적은 내용이 표시되면 그림자가 숨겨진 그림자를 깨닫기 위해 왼쪽으로 이동하려는 부모 컨테이너에 대해 계속 이야기하십시오. 주목해야 할 것은 두 장의 사진이 왼쪽에 동시에 배치되므로 오른쪽이 반으로 표시되면 왼쪽에 숨겨진 그림자가 완전히 표시됩니다. 오른쪽에 표시된 내용은 왼쪽의 내용과 동일하기 때문에 루프 스크롤의 효과가 달성됩니다.
이 부드러운 스크롤이 달성됩니다.
JS 부드럽고 원활한 스크롤 효과를 구현하기위한 위의 코드는 내가 공유 한 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.