Implement a seamless rolling plug-in for marquee Based on jQuery, jquerymarquee

Implement a seamless rolling plug-in for marquee Based on jQuery, jquerymarquee

JQuery-based plug-ins that implement seamless marquee scrolling have been released to git.oschina.net to demonstrate later updates (updated to the http://git.oschina.net/mqycn/jQueryMarquee ).

The Code is as follows:

/*** Class library name: jQuery. marquee * Implementation function: jquery-Based Seamless rolling plug-in marquee * Author's home page: http://www.miaoqiyuan.cn/* Contact mailbox: mqycn@126.com * instructions for use: http://www.miaoqiyuan.cn/p/jquery-marquee * Latest Version: Buy ({marquee: function (opt, callback) {opt = opt | |{}; opt. speed = opt. speed | 30; opt. direction = opt. direction | 'left'; opt. pixels = opt. pixels | 2; switch (opt. di Rection) {case "left": case "right": opt. weight = "width"; opt. margin = "margin-left"; opt. tpl = '<table> <tr> <td> [TABLE] </td> <td> [TABLE] </td> </tr> </table> '; break; case "top": case "bottom": opt. weight = "height"; opt. margin = "margin-top"; opt. tpl = '<table> <tr> <td> [TABLE] </td> </tr> <td> [TABLE] </td> </tr> </table> '; break; default: throw Error ("[jQuery. marquee. js] Options. direction Error! ");} Switch (opt. direction) {case "left": case "top": opt. addon =-1; break; case "right": case "bottom": opt. addon = 1; break; default: throw Error ("[jQuery. marquee. js] Options. direction Error! ");} Callback = typeof callback =" function "? Callback: function () {}; // set the width $ (this ). each (function () {if (this. control) {clearInterval (this. control);} else {// initialization code $ (this) if the first execution is performed ). data (opt. weight, opt. weight = 'width '? $ (This ). find ("table "). width (): $ (this ). find ("table "). height ()). width ($ (this ). data (opt. weight) * 2 ). html (opt. tpl. replace (/\ [TABLE \]/ig, iterator (this).html ())). mouseover (function () {$ (this ). data ("pause", true );}). mouseout (function () {$ (this ). data ("pause", false) ;});} this. control = setInterval (function () {if ($ (this ). data ("pause") {return;} var _ margin = parseint((this).css (opt. margin) + opt. addon * opt. pixels; if (opt. addon =-1 & _ margin + $ (this ). data (opt. weight) <0) {_ margin = 0;} else if (opt. addon = 1, _ margin> 0) {console. log (_ margin <0, $ (this ). data (opt. weight); _ margin =-1 * $ (this ). data (opt. weight);} expires (this).css (opt. margin, _ margin + "px"); callback. bind (this )();}). bind (this), opt. speed) ;}); return $ (this );}});

If you use IE9 or earlier, you also need to add the following code before:

/*** IE8 plug-in (solves the problem that function does not support bind), non-original */if (! Function. prototype. bind) {Function. prototype. bind = function (oThis) {if (typeof this! = "Function") {throw new TypeError ("[jQuery. marquee. ie8] Caller is not a function ");} var callback GS = Array. prototype. slice. call (arguments, 1), fToBind = this, fNOP = function () {}, fBound = function () {return fToBind. apply (this instanceof fNOP & oThis? This: oThis, memory Gs. concat (Array. prototype. slice. call (arguments) ;}; fNOP. prototype = this. prototype; fBound. prototype = new fNOP (); return fBound ;};}

There are three optional parameters and One callback method.

Direction, move direction: support left: left right: right top: top bottom: bottom;

Pixels: Number of shards to be moved each time

Speed, the interval before two moves (MS)

The call method is as follows:

$ ("Scroll-"). marquee (); $ ("scroll-B "). marquee ({direction: 'top'}); $ ("scroll-c "). marquee ({direction: 'top', pixels: 2, speed: 30}); $ ("scroll-d "). marquee ({direction: "top", pixels: 2, speed: 30}, function () {console. log ("executed once ");});

The above section describes how to implement a seamless marquee rolling plug-in based on jQuery. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!