基于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||'left'; opt.pixels=opt.pixels||2; switch(opt.direction){ case"left": case"right": opt.weight="width"; opt.margin="margin-left"; opt.tpl='
[TABLE] | [TABLE] |
[TABLE] | [TABLE] |
如果在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无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!