/**
* @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);