JQuery plugin achieves seamless rolling effect _ jquery

Today, we will share with you a jquery plug-in for seamless Page scrolling. It supports top-down, bottom-up, fade-in and fade-out, scroll time setting, and animation time setting, if you are interested, you can refer to the following html SKELETON:

    
 
 
      
  
  
111
      
  
  
222
      
  
  
333
    
 
 

The structure is simple and clear.

The implementation principle is as follows:

　　P boxIt is the outermost box and specifies the width and height. Remember to add an overflow: hidden (beyond content hiding) style to the box, because the scrolling will definitely exceed the box.

We passJs controls the margin of ul labelsTo implement scrolling. Horizontal scrolling controlsMargin-leftVertical scrolling controlsMargin-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 rolling is exactly greater than the length of a single li, we will move the first li of ul to the end of ul and start again and again, infinite Loop (you can choose not to set overflow: hidden to view this ).

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. The following describes some knowledge points:

1) var timer = []; previously, timer was not declared as an array type. It was when I wrote the 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 and declare it as an array object. Then, through root. each (), each plug-in application has its own independent timer, which does not interfere with 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. It not only obtains the width/height of an element, but also outerWidth () = width + borderLeft + borderRight + marginLeft + marinRight. When it is set to true, it means: outerWidth (true), it will also calculate the padding: outerWidth () = width + borderLeft + borderRight + marginLeft + marinRight + paddingLeft + paddingRight;

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