[Javascript][jQuery]模拟Marquee无缝循环滚动
88284453 2011-03-28
具体可见示例：模拟Marquee无缝滚动
代码如下：
/**
*@classDescription模拟Marquee，无间断滚动内容
*@authorAkenLi(www.kxbd.com)
*@DOM
*<divid="marquee">
*<ul>
*<li></li>
*<li></li>
*</ul>
*</div>
*@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){
varopts=$.extend({},$.fn.kxbdMarquee.defaults,options);
returnthis.each(function(){
var$marquee=$(this);//滚动元素容器
var_scrollObj=$marquee.get(0);//滚动元素容器DOM
varscrollW=$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(scrollSize<(_type?scrollW:scrollH))return;
//克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
varnumMoved=0;
functionscrollFunc(){
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;
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,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);调用页面 展示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>kxbdMarquee-模拟Marquee无缝滚动</title>
<metaname="generator"content="Aptana"/>
<metaname="author"content="[email protected]"/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<styletype="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
a{color:#333;}
ul{list-style:none;}
#marquee1{position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2pxsolid#333;}
#marquee1ulli{float:left;padding:01px;}
#marquee1ulliimg{display:block;}
#marquee2{position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden;background:#EFEFEF;}
#marquee2ulli{float:left;padding:010px;line-height:25px;}
#marquee3{position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2pxsolid#333;}
#marquee3ulli{float:left;padding:1px0;}
#marquee3ulliimg{display:block;}
#marquee4{position:absolute;top:150px;left:400px;width:200px;height:200px;overflow:hidden;background:#EFEFEF;}
#marquee4ulli{float:left;width:180px;padding:10px;line-height:20px;}
</style>
<scripttype="text/javascript"src="../scripts/jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="kxbdMarquee.js"></script>
<scripttype="text/javascript">
$(function(){
$('#marquee1').kxbdMarquee({direction:'right'});
$('#marquee2').kxbdMarquee({isEqual:false});
$('#marquee3').kxbdMarquee({direction:'down'});
$('#marquee4').kxbdMarquee({direction:'up',isEqual:false});
});
</script>
</head><body>
<divid="marquee1">
<ul>
<li><imgsrc="../images/01s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/02s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/03s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/04s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/05s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/06s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/07s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/08s.jpg"width="60"height="45"/></li>
</ul>
</div>
<divid="marquee2">
<ul>
<li><ahref="#">新闻公告一</a></li>
<li><ahref="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
<li><ahref="#">新闻公告三新闻公告三</a></li>
<li><ahref="#">新闻公告四新闻公告四新闻公告四</a></li>
<li><ahref="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
<li><ahref="#">新闻公告六新闻公告六新闻公告六</a></li>
</ul>
</div>
<divid="marquee3">
<ul>
<li><imgsrc="../images/01s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/02s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/03s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/04s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/05s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/06s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/07s.jpg"width="60"height="45"/></li>
<li><imgsrc="../images/08s.jpg"width="60"height="45"/></li>
</ul>
</div>
<divid="marquee4">
<ul>
<li><ahref="#">新闻公告一新闻公告一</a></li>
<li><ahref="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
<li><ahref="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
<li><ahref="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
<li><ahref="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
<li><ahref="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
</ul>
</div>
</body>
</html>
