JavaScript는 부드럽고 원활한 스크롤링_javascript 기술을 달성합니다.

이번 글에서는 참고로 순수 JS로 롤링 광고 효과를 구현해봤습니다

먼저 완성된 모습을 보여드리겠습니다.

첫 번째는 웹페이지 스타일입니다.

#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 1280px;
 height:200px;
 }
 #demo img {
 border: 3px solid #F2F2F2;
 }
 #indemo {
 float: left;
 width: 800%;
 }
 #demo1 {
 float: left;
 }
 #demo2 {
 float: left;
 }

구성은 다음과 같습니다.

 <div id="demo">
 <div id="indemo">
 <div id="demo1">
 <a href="#"><img src="banner.jpg" border="0" /></a>
 <a href="#"><img src="banner2.jpg" border="0" /></a>
 </div>
 <div id="demo2"></div>
 </div>
 </div>

특정 JS 구현:

<script>
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.offsetWidth
else{

 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에 표시된 내용이 왼쪽 그림자의 내용과 동일한 경우 상위 컨테이너의 왼쪽에 있는 그림자의 내용이 표시되고 왼쪽 그림자의 내용이 표시됩니다. 오른쪽에는 다시 숨겨져 있습니다. 오른쪽에 표시된 콘텐츠가 왼쪽에 숨겨진 콘텐츠보다 적으면 상위 컨테이너는 계속해서 왼쪽으로 이동하여 숨겨집니다. 한 가지 주의할 점은 두 장의 사진이 동시에 왼쪽에 배치되어 있기 때문에 오른쪽의 절반이 표시되면 왼쪽에 숨겨진 그림자가 완전히 표시되고, 오른쪽에 표시되는 내용이 표시되기 때문입니다. 측면은 왼쪽의 내용과 다르므로 왼쪽의 내용은 동일하므로 순환 스크롤 효과가 나타납니다.

이러한 방식으로 부드러운 스크롤이 이루어집니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.