基于jQuery实现一个marquee无缝滚动的插件

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

基于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 || 'left';
 opt.pixels = opt.pixels || 2;
 switch( opt.direction ){
 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></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(){};
 //设置宽度
 $(this).each(function(){
 if( this.control ){
 clearInterval(this.control);
 } else {
 //如果第一次执行，初始化代码
 $(this)
 .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, $(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.concat(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:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
 console.log("执行了一次");
});

以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

marquee 无缝滚动 jquery无缝滚动插件