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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值