1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html无缝滚动marquee jquery 模拟marquee无缝滚动

html无缝滚动marquee jquery 模拟marquee无缝滚动

时间:2021-07-15 17:05:01

相关推荐

html无缝滚动marquee jquery 模拟marquee无缝滚动

(function($){

$.fn.kxbdMarquee=function(options){varopts=$.extend({},$.fn.kxbdMarquee.defaults, options);returnthis.each(function(){var$marquee=$(this);//滚动元素容器var_scrollObj=$marquee.get(0);//滚动元素容器DOMvarscrollW=$marquee.width();//滚动元素容器的宽度varscrollH=$marquee.height();//滚动元素容器的高度var$element=$marquee.children();//滚动元素var$kids=$element.children();//滚动子元素varscrollSize=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(scrollSize0) {

numMoved+=opts.scrollAmount;if(numMoved>scrollSize*opts.loop){

_scrollObj[_dir]=0;returnclearInterval(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;

}

}

}//滚动开始varmoveId=setInterval(scrollFunc, opts.scrollDelay);//鼠标划过停止滚动$marquee.hover(function(){

clearInterval(moveId);

},function(){

clearInterval(moveId);

moveId=setInterval(scrollFunc, opts.scrollDelay);

}

);

});

};

$.fn.kxbdMarquee.defaults={

isEqual:true,//所有滚动的元素长宽是否相等,true,falseloop:0,//循环滚动次数,0时无限direction:'left',//滚动方向,'left','right','up','down'scrollAmount:1,//步长scrollDelay:20//时长};

$.fn.kxbdMarquee.setDefaults=function(settings) {

$.extend( $.fn.kxbdMarquee.defaults, settings );

};

})(jQuery);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。