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

2024-02-27 23:03:04 348

基于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] [TABLE]';
break;
case"top":
case"bottom":
opt.weight="height";
opt.margin="margin-top";
opt.tpl='[TABLE]
[TABLE]';
break;
default:
throwError("[jQuery.marquee.js]Options.directionError!");
}
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.directionError!");
}
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)<0){
_margin=0;
}elseif(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(typeofthis!=="function"){
thrownewTypeError("[jQuery.marquee.ie8]Callerisnotafunction");
}
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("执行了一次");
});

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

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

热门推荐

随机推荐