Javascript smooth and seamless rolling effect implementation code _ javascript skills

The following small series will bring you an implementation code for smooth and seamless JS rolling effect. I think this is quite good. Now I will share it with you and give you a reference to this article to implement the rolling advertisement effect in pure JS mode.

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:

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》

Note the following:

ScrollLeft indicates the width of the page hidden on the left of the scroll bar when the page is rolled to the right using the scroll bar.

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

The setInterval () method can call functions or computation expressions according to the specified period (in milliseconds. The setInterval () method does not stop calling the function until clearInterval () 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 by p on the right is the same as the content width of the Left shadow, the content of 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 implement shadow. 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 JS smooth and seamless rolling effect implementation code is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the script.