In this article, we realize the effect of scrolling advertising in pure JS mode.
Let's show the finished product first:
First of all, the web 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="#"><img src="banner.jpg" /></a> <a href="#"><img src="banner2.jpg" /></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.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval (Marquee,speed)}; </script>What to note here is:
scrollLeft represents the width of the page hidden to the left of the scrollbar when the page uses the scrollbar to scroll to the right.
offsetWidth is the visible width of the object, which wraps the scroll bar and is equal to the edges, which will change with the display size of the window.
The setInterval() method can call functions or calculate expressions according to specified periods (in milliseconds). The setInterval() method will keep calling the function until clearInterval() is called or the window is closed.
It’s easy to understand if you understand this specific implementation.
The implementation principle is as follows: first copy a copy of the content that needs to be scrolled. When the content displayed by the div on the right is the same width as the content hidden on the left shadow, the content hidden on the left shadow of the parent container is displayed, so that the content hidden on the left shadow is displayed and the content hidden on the right is rehidden. If the content on the right side displays less than the content hidden on the left side, continue to talk about the parent container that wants to move to the left to realize the shadow hidden. One thing to note is that since two pictures are placed on the left side at the same time, when the right side is half displayed, the shadow hidden on the left side will be fully displayed. Because the content displayed on the right side is the same as the content on the left side, the effect of loop scrolling is achieved.
This smooth scrolling is achieved.
The above code for implementing JS smooth and seamless scrolling effects is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.