Javascript achieves smooth and seamless scrolling and javascript seamless scrolling

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.