jQuery之marquee无缝滚动插件实现教程

来源：互联网 2024-10-12 15:05:00

本文主要介绍了基于jquery实现一个marquee无缝滚动的插件,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。

基于jQuery，实现一个marquee无缝滚动的插件，已经发布到 git.oschina.net，演示稍后更新（更新到 http://git.oschina.net/mqycn/jQueryMarquee ）。

代码如下：

/** * 类库名称：jQuery.marquee * 实现功能：基于 jquery 实现的 marquee 无缝滚动插件 * 作者主页：http://www.miaoqiyuan.cn/ * 联系邮箱：mqycn@126.com * 使用说明：http://www.miaoqiyuan.cn/p/jquery-marquee * 最新版本：http://git.oschina.net/mqycn/jQueryMarquee*/jQuery.fn.extend({  marquee : function(opt, callback){    opt = opt || {};    opt.speed = opt.speed || 30;    opt.direction = opt.direction || &#39;left&#39;;    opt.pixels = opt.pixels || 2;    switch( opt.direction ){      case "left":      case "right":        opt.weight = "width";        opt.margin = "margin-left";        opt.tpl = &#39;<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>&#39;;        break;      case "top":      case "bottom":        opt.weight = "height";        opt.margin = "margin-top";        opt.tpl = &#39;<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>&#39;;        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(){};    //设置宽度    $(this).each(function(){      if( this.control ){        clearInterval(this.control);      } else {        //如果第一次执行，初始化代码        $(this)          .data(opt.weight, opt.weight == &#39;width&#39; ? $(this).find("table").width() : $(this).find("table").height())          .width($(this).data(opt.weight) * 2)          .html(opt.tpl.ｒｅｐｌａｃｅ(/\[TABLE\]/ig, $(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);        }        $(this).css(opt.margin, _margin + "px");        callback.bind(this)();      }).bind(this), opt.speed);    });    return $(this);  }});

如果在IE9以下使用，还需要在之前增加如下代码：

/** * IE8插件（解决 function 不支持 bind 的问题），非原创*/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 aArgs = Array.prototype.slice.call(arguments, 1),      fToBind = this,      fNOP = function() {},      fBound = function() {        return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.ｃｏｎｃａｔ(Array.prototype.slice.call(arguments)));      };    fNOP.prototype = this.prototype;    fBound.prototype = new fNOP();    return fBound;  };}

一共有三个可选参数，一个回调方法。

direction，移动方向：支持左：left 右：right 上：top 下：bottom；

pixels，每次移动的像素数

speed，两次移动之前的间隔时间数（毫秒）

调用方法如下：

$("scroll-a").marquee();$("scroll-b").marquee({direction:&#39;top&#39;});$("scroll-c").marquee({direction:&#39;top&#39;,pixels:2,speed:30});$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){  console.log("执行了一次");});