jquery plug-ins to achieve seamless scrolling effects _jquery

First look at the HTML skeleton, as follows:

<div class= "box" >
    <ul>
      <li>111</li>
      <li>222</li>
      <li> 333</li>
    </ul>
</div>

The structure is simple and clear, nothing to say.

Talk about the implementation principle:

　　Div Box is the outermost box, give it a specified width, remember to add a Overflow:hidden (beyond the content hidden) style to box, because the scroll must be beyond box.

We through JS control ul tag margin to achieve scrolling. The lateral scrolling is the control margin-left ; The longitudinal scrolling is the control margin-top;

In the initial state, we also have to make conditional judgments to determine whether to scroll. That is: when the UL length is less than the outer box length does not scroll, vice versa.

The length of the UL is calculated by calculation, namely: the length of the single Li in the UL times the number of Li. Ul_width = Li_width * LI_NUM;

The reason for seamless scrolling, because each scrolling length is just greater than the length of a single Li, we will be the first Li ul moved to the final UL, Cycle, infinite cycle (about this, you can not set Overflow:hidden to view).

Implementation code for the plug-in:

(function ($) {$.fn.

  Scroll = function (options) {//storing the current context object in root var root = this;

  Default configuration var settings = {speed:40,//scrolling speed, the greater the value the slower the direction: "X"//Scrolling direction ("X" or "Y" [x Transverse; y portrait])};


  is not empty, the merge parameter if (options) $.extend (settings, options);  var timer = [];  Timer VAR marquee;   Scroll player (function) var isroll;   Determine if scrolling (function) var _ul = $ ("> ul", Root);  UL tag var _li = $ ("> Ul > li", root); Li Tag (set) var li_num = _li.length; Number of Li tags var li_first = _li.first ();  Get a single Li tag//Judge portrait or landscape, and make the corresponding action if (settings.direction = = "X") {var li_w = Li_first.outerwidth (true); 　　　　　　 Width of a single li label 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 (PA
     Rseint ($ (this). CSS ("Margin-left")); if (_mleft > Li_w) {//scrolling length is greater than the length of a single Li $ ("> Li:first", $ (this)). Appendto ($ (this));//Just move the first Li to the last $(this). CSS ("Margin-left", 0);
   Rolling length to 0}});
   };
    UL length is less than box length does not scroll, whereas scrolling isroll = function (t) {if (Ul_w <= root.width ()) clearinterval (t);
   else Marquee (); } else {var li_h = Li_first.outerheight (TRUE);/////height var ul_h = li_h * li_num;//ul Label Height _ Ul.css ({height:ul_h}); Set UL Height marquee = function () {_ul.animate ({margintop: "-=1"}, 0, function () {var _mtop = Math.Abs (pars Eint ($ (this). CSS ("Margin-top"));
      Take the absolute value if (_mtop > Li_h) {$ ("> Li:first", $ (this)). Appendto ($ (this));
     $ (this). CSS ("Margin-top", 0);
   }
    });
   };
    UL length is less than box length does not scroll, whereas scrolling isroll = function (t) {if (Ul_h <= root.height ()) clearinterval (t);
   else Marquee (); }//Follow the chain principle and initialize return Root.each (function (i) {//Beyond content concealment to prevent user from writing overflow $ (this). css ({overflow: "hidden

   " });
   Timer[i] = setinterval (function () {isroll (timer[i)); }, Settings.speed);

   Mouse into stop scrolling, leaving continue scrolling $ (this). Hover (function () {clearinterval (timer[i));
    The function () {Timer[i] = setinterval (function () {isroll (timer[i));
   }, Settings.speed);

  });

 });
};

 }) (JQuery);

The basic code description notes are clearly written, and the following is an explanation of individual knowledge points:

1), Var timer=[]; The timer was not declared to be an array type, but when I wrote the demo, there were bugs when the page had two seamless scrolling applications (to demonstrate landscape and portrait).

Because they shared a timer timer, the other timer was clear when the mouse entered one of the two. Then modify the code to declare it an array object, and then through the Root.each () on the implementation of each plug-in application has its own independent timer timer, non-interference. That is to say, this plugin supports multiple seamless scrolling applications at the same time.

2), Outerwidth ()/outerheight () function. This function is more powerful, it gets more than just the width/height of the element, actually outerwidth () =width+borderleft+borderright+marginleft+marinright; when it is set to true, That is: Outerwidth (true), it also calculates padding: outerwidth () =width+borderleft+borderright+marginleft+marinright+paddingleft +paddingright;

The demo code is given below:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Effect Picture:

The above is the jquery plug-in to achieve seamless scrolling effects, the effect of some simple, not very beautiful, but the method is correct, I hope everyone on this basis to beautify.