JS Seamless Scrolling Effect Realization method Analysis _javascript Skill

This paper illustrates the implementation of JS seamless scrolling effect. Share to everyone for your reference, specific as follows:

Effect:

1. Default slow to left scroll

2. On the left ARROW or left to scroll, put on the right arrow scroll right

3. Put on the picture to stop scrolling, move out and continue scrolling

Ideas:

1. Calculate the picture list ul width

2. Turn the timer on to the left margin, causing the effect of moving to the left

3. A copy of the picture list, when moving to the left, when the left margin is greater than the width of one, pull its left margin back to 0. When you move to the right, when the left margin is greater than 0 o'clock, pull its left margin to half the width of the entire two picture list (that is, one width). (Pull the moment quickly, the user does not perceive, resulting in a seamless scrolling illusion)

The 4.offsetLeft value of the positive and negative decide which way to move

5. Put on the picture to stop this timer, remove and open again

Window.onload=function () {var odiv=document.getelementbyid (' div ');
 var oul=odiv.getelementsbytagname (' ul ') [0];
 var oli=oul.getelementsbytagname (' Oul ');
 var btn=document.getelementsbytagname (' btn ');
 var ispeed=-1;
 var timer=null; oul.innerhtml+=oul.innerhtml; The picture list copies a copy of oul.style.width=oli[0].offsetwidth*oli.length+ ' px '; Do not calculate the width of the UL, the movement of the following will appear before loading pictures, there is a sense of not fluent, cut the picture too many will branch, by the outside of the div decision width timer=setinterval (function () {oul.style.left=  oul.offsetleft+ispeed+ ' px '; Offsetleft output is the number without units, the right also with Oul.style.left output is a string, not a numeric value, and it gets the row style, useless if (OUL.OFFSETLEFT<-OUL.OFFSETWIDTH/2) {/ /When judging, you can also use. style.left or. style.width?
  (uncertain) oul.style.left=0;
  else if (oul.offsetleft>0) {OUL.STYLE.LEFT=-OUL.OFFSETWIDTH/2;
 }), 30};
 Btn[0].onmouseover=function () {ispeed=-1;
 };
 Btn[1].onmouseover=function () {ispeed=1;
 };
 Oul.onmouseover=function () {clearinterval (timer);
 };
   Oul.onmouseout=function () {Timer=setinterval (function () {oul.style.left=oul.offsetleft+ispeed+ ' px '); if (oul.ofFSETLEFT<-OUL.OFFSETWIDTH/2) {oul.style.left=0;
   else if (oul.offsetleft>0) {OUL.STYLE.LEFT=-OUL.OFFSETWIDTH/2; }), 30}; If the speed of the larger, and the time of the timer is also larger can achieve the same effect? The answer is no.
will turn into a card and a card;

 };

Note: the width of such a child is not margin, so the spacing between the pictures can be written in Li's width greater than the IMG's width, Li's width-img width, is the margin of both sides and

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.