/** * @classdescription 模拟marquee,无间断滚动内容 * @author aken li(www.kxbd.com) * @dom *
* *
* @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//时长 */ (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'){ _scrollobj[_dir] +=opts.scrollamount; if(_scrollobj[_dir]>=scrollsize){ _scrollobj[_dir] = 0; } }else{ _scrollobj[_dir] -=opts.scrollamount; if(_scrollobj[_dir]<=0){ _scrollobj[_dir] = scrollsize; } } } //滚动开始 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:40//时长 }; $.fn.kxbdmarquee.setdefaults = function(settings) { $.extend( $.fn.kxbdmarquee.defaults, settings ); }; })(jquery);