JS Smooth Seamless scrolling implementation

This article we realize the pure JS way of scrolling advertising effect.

Show the finished product first:

The first is the page style:

1. #demo {

2. Background: #FFF;

3. Overflow:hidden;

4. border:1px dashed #CCC;

5. width:1280px;

6. height:200px;

7.}

8. #demo img {

9. border:3px solid #F2F2F2;

10.}

One. #indemo {

Float:left;

width:800%;

14.}

#demo1 {

Float:left;

17.}

#demo2 {

Float:left;

20.}

The layout is as follows:

1. <div id= "Demo" >

2. <div id= "Indemo" >

3. <div id= "Demo1" >

4. <a href= "#" ></a>

5. <a href= "#" ></a>

6. </div>

7. <div id= "Demo2" ></div>

8. </div>

9. </div>

The specific JS implementation:

1. <script>

2. var speed=10;

3. Var Tab=document.getelementbyid ("demo");

4. Var Tab1=document.getelementbyid ("Demo1");

5. Var Tab2=document.getelementbyid ("Demo2");

6. tab2.innerhtml=tab1.innerhtml;

7. Function Marquee () {

8. if (tab2.offsetwidth-tab.scrollleft==0)

9. Tab.scrollleft-=tab1.offsetwidth

Ten. else{

One. tab.scrollleft++;

12.}

13.}

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 scrollbar when the page is scrolled to the right with the scroll bar.

The offsetwidth is the visible width of the object, and the edges such as the package scroll bar change with the window's display size.

setinterval The () method invokes a function or evaluates an expression according to the specified period (in milliseconds). setinterval The () method will keep calling the function until Clearinterval () is called or the window is closed.

Understand this concrete realization is good to understand.

The principle of implementation is this: first copy the content that needs scrolling. When the div on the right shows the content with the width of the left shadow, the contents of the left shadow of the parent container are displayed, so that the contents of the left shadow are displayed and the contents of the right side are hidden again. If the content on the right side of the display is less than the left shadow, continue to say that the parent container wants to move to the left to implement the shadow. One of the things to note is that since this is the two pictures placed on the left side, when the right side of the display half of the shadow will be the left side of the full display, and because the right side of the content is displayed with the left side of the same content so that the effect of circular scrolling.

This smooth scrolling is achieved.

Thank you for your support!

Can contact me for communication. [Email protected]

2016.2.5

4:55

JS Smooth Seamless scrolling implementation