jquery implementation Scrolling effect detailed 1

Statement: The first time to write original, I beginner, many places smattering, this is a study of notes, welcome criticism, reproduced please specify.

The effect of today is to be able to see many pictures on the internet, seamless scrolling to the left, the mouse over the animation pause, the mouse slide out of the animation to continue the effect. On-line code and plug-ins are many, to use sometimes not handy, today I came to learn its principles.

To achieve this effect:
1, need a display area, scrolling content only through the display area can be seen Id=visual_area
2, the rolling content of the horizontal arrangement of the carrier, we call it the canvas, attention can not understand the PS in the canvas Class=scroll_area
3. What appears to be scrolling id=scroll_content

See, you can imagine #scroll_content, a total of 4 pieces to scroll the content, as if the content 1,2,3,4 hand through the visual area, if you let the content 4 scroll out of the visual area, and then re-scroll, there will be a period of blank, how to deal with it, Today's example of the use of duplicate scrolling content to complement the method, because the content of the complement is identical to #scroll_content, the naked eye looks like continuous scrolling, why a lot of JS scrolling effect we take over to change to their own CSS style, there is a beating, that is the reason.

I mentioned above, "What seems to be scrolling", in fact, in this case is not #scroll_content in the scroll, but the visual area of the scroll bar in the horizontal position at a certain time, such as 200 pixels every 1000 milliseconds, the position of the horizontal scroll bar is the leftmost 0, the right is increasing.

Here is an example where I use the orange area to do the visual area, the CSS setting shows the scrollbar overflow:scroll instead of the hidden, the rainbow part is the canvas, and the canvas appears to scroll to the left as we drag the scroll bar to the right.



In this case, for the sake of observation, I marked the contents of the complement.
HTML structure:

<div id= "Visual_area" >  <div class= "Scroll_area" >    <ul id= "scroll_content" >      <li ><p> content 1</p></li>      <li><p> content 2</p></li>      <li><p> Content 3</p></li>    </ul>    <ul>      <li><p> complement 1</p></li>      <li><p> complement 2</p></li>      <li><p> complement 3</p></li>    </ul>  </div></div>

See: #visual_area滚动条的值超过 #scroll_content width, the value of the scrollbar is set to 0, and then continue to increase, so the cycle, looks like a continuous scroll, if the content and content of the complement 1 11 of everything, for us there is no beating.




CSS notation:

* {padding:0;margin:0}#visual_area{width:600px;Height:150px;background:#333;margin:100px Auto;Overflow:Hidden; }#visual_area ul{background:#fff;float: Left}#visual_area Li{List-style:None;float: Left;width:200px;Height:150px;Line-height:150px;text-align:Center; }#visual_area Li P{background:#ccc;width:198px;Height:148px;Border:1px solid #000}. Scroll_area{width:4000px;Height:150px}

The width of the. Scroll_area is larger than the width of the #scroll_content and complement content.

JavaScript notation:

$ (function() {    var roll=function() {        var o_place=$ (' #visual_area '). ScrollLeft ();         var n_place=o_place+200;         if (n_place<$ (' #scroll_content '). Width ()) {                $ (' #visual_area '). ScrollLeft (N_place);        }         Else {            $ (' #visual_area '). ScrollLeft (0);        }    }    SetInterval (roll,+);    })

In the detailed 1, I made one of the simplest seamless scrolling effect, the mouse slide into the slide out of the processing in the detailed 2 continue to explain, because I am a beginner, many times are learning along the side of the record.
The SetInterval function shows that, in this case, 1000 milliseconds (interval) to scroll to the left 200 pixels (step), is a very slow and feel some jumping scrolling, to achieve a relatively smooth effect, time interval and step size as small as possible, adjust these two values will have a lot of interesting effects, If you are interested, you can try it.
It should be stated that:
var o_place=$ (' #visual_area '). ScrollLeft ();
var n_place=o_place+200;

Why did you do it?
setinterval function after 1 seconds after the page load, get the visual area scroll bar position, the scrollbar position is set to +200, so the roll function is executed once the scroll bar position plus 200, add 200 after the scroll bar position is greater than the width of the scrolling content of the scroll bar position 0.

Liu Muiun

Date: 1 year (February 11)

jquery implementation Scrolling effect detailed 1