/** * @classdescription 模拟marquee,无间断滚动内容 * @author lyc 修改 * @dom *
* *
* @css * #marquee {overflow:hidden;width:200px;height:50px;} * @usage * $("#marquee").kxbdmarquee(options); * @options * isequal:true, //所有滚动的元素长宽是否相等,true,false * loop:0, //循环滚动次数,0时无限 * direction:"left", //滚动方向,"left","right","up","down" * scrollamount:1, //步长 * scrolldelay:20 //时长 */ (function($){ $.fn.kxbdmarquee=function(options){ var opts=$.extend({},$.fn.kxbdmarquee.defaults, options); return this.each(function(){ var $marquee=$(this); //滚动元素容器 var _scrollobj=$marquee.get(0); //滚动元素容器dom var scrollw=$marquee.width(); //滚动元素容器的宽度 var scrollh=$marquee.height(); //滚动元素容器的高度 var $element=$marquee.children(); //滚动元素 var $kids=$element.children(); //滚动子元素 var scrollsize=0; //滚动元素尺寸 //滚动类型,1左右,0上下 var _type=(opts.direction=="left"||opts.direction=="right") ? 1:0; //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度 $element.css(_type?"width":"height",10000); //获取滚动元素的尺寸 if(opts.isequal){ scrollsize=$kids[_type?"outerwidth":"outerheight"]()*$kids.length; }else{ $kids.each(function(){ scrollsize+=$(this)[_type?"outerwidth":"outerheight"](); }); }; //滚动元素总尺寸小于容器尺寸,不滚动 if(scrollsize<(_type?scrollw:scrollh)){return;}; //克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度 $element.append($kids.clone()).css(_type?"width":"height",scrollsize*2); var nummoved=0; function scrollfunc(){ var _dir=(opts.direction=="left"||opts.direction=="right") ? "scrollleft":"scrolltop"; if (opts.loop>0) { nummoved+=opts.scrollamount; if(nummoved>scrollsize*opts.loop){ _scrollobj[_dir]=0; return clearinterval(moveid); }; }; if(opts.direction=="left"||opts.direction=="up"){ var newpos=_scrollobj[_dir]+opts.scrollamount; if(newpos>=scrollsize){ newpos-=scrollsize; } _scrollobj[_dir]=newpos; }else{ var newpos=_scrollobj[_dir]-opts.scrollamount; if(newpos<=0){ newpos += scrollsize; }; _scrollobj[_dir]=newpos; }; }; //滚动开始 var moveid=setinterval(scrollfunc, opts.scrolldelay); //鼠标划过停止滚动 $marquee.hover(function(){ clearinterval(moveid); },function(){ clearinterval(moveid); moveid=setinterval(scrollfunc, opts.scrolldelay); }); }); }; $.fn.kxbdmarquee.defaults={ isequal:true, //所有滚动的元素长宽是否相等,true,false loop: 0, //循环滚动次数,0时无限 direction: "left", //滚动方向,"left","right","up","down" scrollamount:1, //步长 scrolldelay:20 //时长 }; $.fn.kxbdmarquee.setdefaults=function(settings) { $.extend( $.fn.kxbdmarquee.defaults, settings ); }; })(jquery);