JavaScript enables smooth and seamless scrolling _javascript skills

This article we realize the Pure JS mode of scrolling advertising effect, for your reference, the specific content as follows

Show the finished product first:

First is the page 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>

The 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.offsetwidth
else{

 tab.scrollleft++

 }
}
var mymar=setinterval (marquee,speed);
Tab.onmouseover=function () {clearinterval (MyMar)};
Tab.onmouseout=function () {mymar=setinterval
(marquee,speed)};
</script>

Here's what to note:

ScrollLeft represents the width of the page that is hidden on the left side of the scroll bar when scrolling to the right using the scroll bar.

The offsetwidth is the visible width of the object, and the line, such as the package scroll bar, changes with the display size of the window.

The setinterval () method can call a function or a calculation expression in the specified period (in milliseconds). The SetInterval () method keeps calling the function until the clearinterval () is called or the window is closed.

Understand this specific realization is good to understand.

The principle of implementation is this: first copy the content that needs to be scrolled. When the right side of the div display content and the content width of the left shadow hidden from the left side of the contents of the parent container display, so that the contents of the left side of the hidden content displayed at the same time the right content to be hidden again. If the content on the right side of the display is less than the contents of the left shadow, continue to tell the parent container to move to the left to hide. One of the points to note is that since the two pictures are placed on the left side, when the right side of the display of half will be the left side of the shadow of the full display, but also because the right side of the content and left side of the same content so that the effect of circular scrolling.

This smooth scrolling is achieved.

The above is the entire content of this article, I hope to help you learn.