Javascript achieves smooth and seamless scrolling and javascript seamless scrolling

Javascript achieves smooth and seamless scrolling and javascript seamless scrolling

In this article, we implement the rolling advertisement effect in pure JS mode for your reference. The specific content is as follows:

Show the finished product first:

First, webpage style:

#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; }

The layout is as follows:

 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"></a> <a href="#"></a> </div> <div id="demo2"></div> </div> </div>

Specific JS implementation:

<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.offsetWidthelse{ tab.scrollLeft++; }}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};</script>

Note the following:

ScrollLeftIt indicates the width of the page hidden on the left of the scroll bar when the page is scroll to the right.

OffsetWidthIs the visible width of the object. The package's scroll bar and other edges change with the display size of the window.

SetInterval ()A function or computing expression can be called according to the specified period (in milliseconds. The setInterval () method does not stop calling the functionClearInterval ()Is called or the window is closed.

You can understand the specific implementation.

The implementation principle is as follows: first, copy the content to be rolled. When the content displayed in the right div is the same as the content width in the left shadow, the content in the left shadow of the parent container is displayed, in this way, the content of the left side shadow is displayed and the content on the right is hidden again. If the content displayed on the right is less than the content of the Left shadow, the parent container will move on the left to hide the content. One thing to note is that because the two images are placed on the left side at the same time, when the right side shows half, the left side will be completely displayed, because the content displayed on the right side is the same as the content displayed on the left side, circular scrolling is achieved.

In this way, smooth scrolling is achieved.

The above is all the content of this article, hoping to help you learn.