Seamless scrolling by writing jQuery plug-ins by yourself

Seamless scrolling by writing jQuery plug-ins by yourself
First, let's look at the html skeleton as follows: copy the Code <div class = "box"> <ul> <li> 111 </li> <li> 222 </li> <li> 333 </li> </ul> </div> the copy code structure is simple and clear, nothing to say. The implementation principle is as follows: The div box is the outermost box. Specify the width and height for it. Remember to add an overflow: hidden (beyond content hiding) style to the box, because scrolling is definitely beyond the box. We use js to control the margin of ul labels for scrolling. Horizontal scrolling controls margin-left, and vertical scrolling controls margin-top. In initial state, we also need to make conditional judgments 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 scrolling is that when the length of each scroll is just 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 ). 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: copy the code (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 longer 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. anim Ate ({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) {// hide beyond content to 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); copy the basic code of the Code to describe the annotations. I will explain some knowledge points below: 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 realize that 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; how is it very powerful! The DEMO code is as follows: copy the Code <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">