/** * @css * #marquee {width:200px;height:50px;overflow:hidden;} * @usage * $('#marquee').kxbdmarquee(options); * @options * isequal:true,//所有滚动的元素长宽是否相等,true,false * loop: 0,//循环滚动次数,0时无限 * direction: 'left',//滚动方向,'left','right','up','down' * scrollamount:1,//步长 * scrolldelay:20//时长 * 用法: $('#panel').kxbdmarquee({direction:'up'}); */ (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;//滚动元素尺寸 var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,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);