基于jQuery实现一个marquee无缝滚动的插件
基于jQuery，实现一个marquee无缝滚动的插件，已经发布到 git.oschina.net，演示稍后更新（更新到 http://git.o***schina.net/mqycn/jQueryMarquee ）。
代码如下：
| 代码如下 | 复制代码 | ||||
|
/** * 类库名称：jQuery.marquee * 实现功能：基于 jquery 实现的 marquee 无缝滚动插件 * 作者主页：http://www.**m*iaoqiyuan.cn/ * 联系邮箱：[email protected] * 使用说明：http://www.**m*iaoqiyuan.cn/p/jquery-marquee * 最新版本：http://git.o***schina.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 ='
break; case"top": case"bottom": opt.weight ="height"; opt.margin ="margin-top"; opt.tpl ='
| [TABLE] | ||||
break;
default:
throwError("[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:
throwError("[jQuery.marquee.js] Options.direction Error!");
}
callback =typeofcallback =="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)
_margin = 0;
}elseif( opt.addon == 1, _margin > 0 ){
console.log(_margin
_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(typeofthis!=="function") { thrownewTypeError("[jQuery.marquee.ie8] Caller is not a function"); } varaArgs = Array.prototype.slice.call(arguments, 1), fToBind =this, fNOP =function() {}, fBound =function() { returnfToBind.apply(thisinstanceoffNOP && oThis ?this: oThis, aArgs.concat(Array.prototype.slice.call(arguments))); }; fNOP.prototype =this.prototype; fBound.prototype =newfNOP(); returnfBound; }; } |
|
一共有三个可选参数，一个回调方法。
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("执行了一次"); }); |
|
