Compile jQuery-Based Seamless rolling plug-in _ jquery-js tutorial

This article mainly introduces the seamless rolling plug-in implementation code based on jQuery. For more information, see the following html SKELETON:

    
 
 
      
  
  
111
      
  
  
222
      
  
  
333
    
 
 

The structure is simple and clear.

The implementation principle is as follows:
P box is the outermost box, and the width and height are specified for it. Remember to add an overflow: hidden (beyond content hiding) style to the box, because the scrolling will definitely exceed the box.
We use js to control the margin of ul labels for scrolling. Horizontal scrolling controls margin-left; vertical scrolling controls margin-top;
In the initial state, we also need to determine the conditions to determine whether to scroll. That is, if the ul length is smaller than the outer box length, scroll is not performed. Otherwise, scroll is performed.
The length of ul is calculated by multiplying the length of a single li in ul by the number of li. Ul_width = li_width * li_num;
The reason for seamless rolling is that when the length of each scroll is exactly greater than the length of a single li, we will move the first li of ul to the end of ul, repeating and infinite loops (about this
You can choose not to set overflow: hidden first ).
　　
The principle is too TM to test my ability to express myself. I hope I can clarify it clearly.

Let's look at the implementation code of the plug-in:

(Function ($) {$. fn. scroll = function (options) {// Save the current context object to root var root = this; // The default var settings = {speed: 40, // Scroll speed, the greater the value, the slower the speed. ction: "x" // scroll direction ("x" or "y" [x horizontal; y vertical])}; // not empty, merge the parameter if (options) $. extend (settings, options); var timer = []; // timer var marquee; // The scroll (function) var isRoll; // determines whether to scroll (function) var _ ul = $ ("> ul", root); // ul label var _ li = $ ("> ul> li", root ); // li tag (SET) var li_num = _ li. length; // Number of li tags var li_first = _ li. first (); // obtain a single li tag // determine whether it is vertical or horizontal, and perform the corresponding operation if (settings. direction = "x") {var li_w = li_first.outerWidth (true); // var ul_w = li_w * li_num; // ul label width _ul.css ({width: ul_w}); // set ul width marquee = function () {_ ul. animate ({marginLeft: "-= 1"}, 0, function () {var _ mleft = math.abs(parseint(detail (this).css ("margin-left"); if (_ mleft> li_w) {// The scroll length is greater than the length of a single li $ ("> li: first", $ (this )). appendTo ($ (this); // move the first li to the last vertex (this).css ("margin-left", 0); // The scroll length is 0 }});}; // if the ul length is smaller than the box length, the scroll isRoll = function (t) {if (ul_w <= root. width () clearInterval (t); else marquee () ;}} else {var li_h = li_first.outerHeight (true); // var ul_h = li_h * li_num for a single li label; // ul label height _ul.css ({height: ul_h}); // set ul height marquee = function () {_ ul. animate ({marginTop: "-= 1"}, 0, function () {var _ mtop = math.abs(parseint(%(this%.css ("margin-top "))); // obtain the absolute value if (_ mtop> li_h) {$ ("> li: first", $ (this )). appendTo ($ (this); then (this).css ("margin-top", 0) ;}};}; // if the length of ul is smaller than the length of box, no scrolling is performed, roll isRoll = function (t) {if (ul_h <= root. height () clearInterval (t); else marquee () ;}// follow the chained principle and initialize return root. each (function (I) {// beyond the content to hide, Prevent Users From Writing overflow styles (this).css ({overflow: "hidden"}); timer [I] = setInterval (function () {isRoll (timer [I]) ;}, settings. speed); // move the mouse to stop scrolling, and then move to continue scrolling $ (this ). hover (function () {clearInterval (timer [I]) ;}, function () {timer [I] = setInterval (function () {isRoll (timer [I]) ;}, settings. speed) ;}) ;};}}( jQuery );

The basic code description is clearly annotated. Next we will explain some knowledge points:

1 .) var timer = []; previously, timer was not declared as an array type, but when I wrote a demo, because there are two seamless scrolling applications on the page at the same time (to demonstrate both horizontal and vertical), a bug occurs.

Because the two of them share a timer, when the mouse enters one of them, the other timer is also clear. Then modify the code to declare it as an array object, and then use root. each () to implement
Every plug-in application has its own independent timer, which does not affect each other. That is to say, this plug-in supports multiple seamless scrolling applications on the page at the same time.

2.) outerWidth ()/outerHeight () function. This function is powerful, and it not only obtains the width/height of elements,

Actually outerWidth () = width + borderLeft + borderRight + marginLeft + marinRight;
When it is set to true, that is, outerWidth (true), it will also calculate the padding:
OuterWidth () = width + borderLeft + borderRight + marginLeft + marinRight + paddingLeft + paddingRight;

How about it? Is it very powerful!

The DEMO code is provided below:

  
    
 
 
      
  
  
111 vertical
      
  
  
222 vertical
      
  
  
333 vertical
      
  
  
444 vertical
      
  
  
555 vertical
      
  
  
666 vertical
    
 
 
  
  
    
 
 
      
  
  
111 horizontal
      
  
  
222 horizontal
      
  
  
333 horizontal
      
  
  
444 horizontal
      
  
  
555 horizontal
      
  
  
666 horizontal
    
 
 
  
     
      
 
 
      
  
  
Ul length is smaller than box length and does not scroll
      
  
  
222 horizontal
      
  
  
333 horizontal