基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 nofollow" href="http://git.oschina.net/mqycn/jQueryMarquee">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 = '代码
$(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);
}
});