이 기사에서는 귀하의 참조를 위해 순수한 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 ( "demo"); var tab1 = document.getElementById ( "demo1"); var tab2 = document.getElementById ( "demo2"); tab2.innerhtml = tab1.innerhtml; function marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidthelse {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onmouseOver = function () {clearInterVal (mymar)}; tab.onMouseOut = function () {myMar = setInterVal (Marquee, Speed)}; </script>여기에 주목해야 할 것은 다음과 같습니다.
Scrollleft는 페이지가 스크롤 바를 사용하여 오른쪽으로 스크롤 할 때 스크롤바의 왼쪽에 숨겨진 페이지 너비를 나타냅니다.
OffsetWidth 는 객체의 가시 너비로 스크롤 막대를 감싸고 가장자리와 동일하므로 창의 디스플레이 크기에 따라 변경됩니다.
setInterval () 메소드는 지정된 기간 (밀리 초)에 따라 함수를 호출하거나 표현식을 계산할 수 있습니다. setInterVal () 메소드는 clearInterVal ()가 호출되거나 창이 닫힐 때까지 함수를 계속 호출합니다.
이 특정 구현을 이해하면 이해하기 쉽습니다.
구현 원리는 다음과 같습니다. 먼저 스크롤 해야하는 컨텐츠의 사본을 복사하십시오. 오른쪽의 DIV에 의해 표시되는 내용이 왼쪽 그림자에 숨겨진 내용과 동일한 너비 인 경우, 상위 컨테이너의 왼쪽 그림자에 숨겨진 내용이 표시되므로 왼쪽 그림자에 숨겨져있는 내용이 표시되고 오른쪽에 숨겨진 내용이 다시 표시됩니다. 오른쪽에있는 내용이 왼쪽에 숨겨진 내용보다 적은 내용을 표시하면 부모 컨테이너가 숨어 달성하기 위해 왼쪽으로 이동하려고한다고 계속 말하십시오. 주목해야 할 것은 두 장의 사진이 왼쪽에 동시에 배치되므로 오른쪽이 반으로 표시되면 왼쪽에 숨겨진 그림자가 완전히 표시됩니다. 오른쪽에 표시된 내용은 왼쪽의 내용과 동일하기 때문에 루프 스크롤의 효과가 달성됩니다.
이 부드러운 스크롤이 달성됩니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.