JS 부드럽고 원활한 스크롤 효과 구현 code_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" / alt="JS 부드럽고 원활한 스크롤 효과 구현 code_javascript 기술" ></a>

 <a href="#"><img  src="banner2.jpg" border="0" / alt="JS 부드럽고 원활한 스크롤 효과 구현 code_javascript 기술" ></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에 표시된 내용이 왼쪽 그림자의 내용과 동일한 경우 상위 컨테이너의 왼쪽에 있는 그림자의 내용이 표시되고 왼쪽 그림자의 내용이 표시됩니다. 오른쪽에는 다시 숨겨져 있습니다. 오른쪽에 표시되는 콘텐츠가 왼쪽에 숨겨진 콘텐츠보다 적으면 부모 컨테이너는 그림자 숨기기를 달성하기 위해 계속해서 왼쪽으로 이동됩니다. 한 가지 주의할 점은 두 장의 사진이 동시에 왼쪽에 배치되어 있기 때문에 오른쪽의 절반이 표시되면 왼쪽에 숨겨진 그림자가 완전히 표시되고, 오른쪽에 표시되는 내용이 표시되기 때문입니다. 측면은 왼쪽의 내용과 다르므로 왼쪽의 내용은 동일하므로 순환 스크롤 효과가 나타납니다.

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

위의 JS 부드럽고 매끄러운 스크롤 효과 구현 코드는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.