JS Seamless scrolling principle from right to left

Last Update:2017-04-24 Source: Internet

Author: User

Tags unique id

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today the company's homepage added a bulletin requirements, similar to the effect of the following code, after doing a careful thought about the principle of the

Before you say the principle of the proposed first look at my previous HTML precise positioning: Scrollleft,scrollwidth,clientwidth,offsetwidth of the full details of this article, the example of the image of the interpretation of the different positioning, and different parsing results under each browser.

Do not knock too much text, directly on the code, the dry goods are in the comments

<!DOCTYPE HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>JS Text Scroll left seamlessly</title></Head><Body>
<styletype= "Text/css">. Qimo8{Overflow:Hidden;width:815px;}/* Outer Div, set announcement visible range * /. Qimo8. Qimo{/*width:9999999999px;*/width:8000%;Height:30px;}/* Announcement content, reserved enough space width for content */
. Qimo8. Qimo Div{float: Left;}/* includes demo1 and Demo2 to combine two layers into a single row, which is also the key to a seamless docking */
. Qimo8. Qimo ul{float: Left;Height:30px;Overflow:Hidden;Zoom:}
. Qimo8. Qimo ul Li{float: Left;Line-height:30px;List-style:None;}
. Qimo8 Li a{Margin-right:10px;Color:#444;} 
</style> 

<DivID= "Demo"class= "Qimo8"> 
 　　 <Divclass= "Qimo"> 
<DivID= "Demo1"> 
<ul> 
<Li><ahref= ' # '>11111111111111111</a></Li> 
<Li><ahref= ' # '>22222222222222222</a></Li> 
<Li><ahref= ' # '>11111111111111111</a></Li> 
<Li><ahref= ' # '>22222222222222222</a></Li>
<Li><ahref= ' # '>11111111111111111</a></Li> 
<Li><ahref= ' # '>22222222222222222</a></Li> 
</ul> 
</Div> 
<DivID= "Demo2"></Div> 
</Div> 
</Div> 

<Scripttype= "Text/javascript"> 
varDemo=document.getElementById ("Demo")///Outer visual module
varDemo1=document.getElementById ("Demo1"); Inner-Layer scrolling content Module 1
varDemo2=document.getElementById ("Demo2");//Inner scrolling Content Module 2 seamlessly to the content behind 1

demo2.innerhtml = document.getElementById ("demo1"). InnerHTML; Copy the contents of Demo1 to Demo2
Key players on the pitch

  function   Marquee () {
       /* Create a scrolling function   
  1) demo.scrollleft is the distance between the left side of the object that the Visual area demo is in and the current visible content in the window, typically starting from 0 
     
  2) Demo2.offsetwidth is the width of the parent coordinate specified by the Demo2 relative to the layout or by the parent coordinate offsetParent property, which is generally fixed, Is the total width of the current scrolling content; 
 3)   demo.scrollleft and demo2.offsetwidth the value is equal to 0 or not less than 0 when the content of Demo1 is completely scrolled out of the visible range; 
 So let  Demo.scrollleft is again equal to 0, (here is the result of Demo.scrollleft minus demo2.offsetwidth, no problem should be 0   is visually equivalent to Demo1 replacing the current Demo2 in the same location, in fact, two modules are not replaced, just repeat the initialization state, restart from demo1 start   
 4)    DEMO.SCR Ollleft and demo2.offsetwidth subtract values less than 0 let the   demo.scrollleft increment the value, move left

*/

if (demo.scrollleft-demo2.offsetwidth>=0
Demo.scrollleft-=
 Print the values here.
 Console.log ("" +  demo.scrollleft+ "offsetwidth value for-demo1:" +demo1.offsetwidth+ "equals" + Demo.scrollleft-=demo1.offsetwidth;

   }  else   {
 Console.log (  "  demo scrollleft value:  "   +   Demo.scrollleft   +   Subtract   Demo2.offsetwidth:   "  +   demo2.offsetwidth   +   equals   = = =   "  +   (demo.scrollleft  -  demo2.offsetwidth));   
 Demo.scrollleft   + +  ; 
} 
} 
 
 //The following paragraph is about JS's asynchronous periodic function, I do not know that I call it is not accurate,     Span style= "COLOR: #888888" >setinterval can also be written as  window.   setinterval

   /*  
 < Span style= "COLOR: #ff0000" > special description : Any method that belongs to a Window object can be used directly without using a Window object call.  
 clearinterval ()  Will go on forever. 
  The return value is the unique ID identifier of the current timer.  
  There are two articles in question, which are explained in very comprehensive detail  
 http ://www.softwhy.com/forum.php?mod=viewthread&tid=3972  
 http:// www.softwhy.com/forum.php?mod=viewthread&tid=6940  
 */ 
 
 //first save the function in a variable,  
 var   myvar   =   setinterval (Marquee,    ); 
 
 //below is       onmouseout and      onmouseover general usage, mouse move start scrolling, mouse over     clearinterval    pause

   demo.onmouseout   =  function   () {myvar   =   setinterval (Marquee,  ,  );} 
       demo.onmouseover   =  function   () {clearinterval (MyVar)}


</ Script >
</ Body >
</ HTML >

JS Seamless scrolling principle from right to left

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More