[转载 js] 不间断滚动类
在blueidea看到的代码,不错,转过来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不间断滚动</title>
<style>
#Marquee{ height:180px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
#Marquee2{ height:180px; overflow:hidden;}
#Marquee2 div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
</style>
</head>
<body>
<div id="Marquee">
<div>aaaaa</div>
<div>bbbbbbbb</div>
<div>cccccccccccc</div>
<div>dddddddddddddddd</div>
</div><br />
<div id="Marquee2">
<div>aaaaa</div>
<div>bbbbbbbb</div>
<div>cccccccccccc</div>
<div>dddddddddddddddd</div>
</div>
</body>
</html>
<script>
function Marquee(container,config){
var cfg = {
picH : 60,//图片高度
count : 1,//一次滚动图片数量
speed : 50,//滚动速度,越少越快
tag : "div"//子元素的标签名
};
for(var p in config){
cfg[p] = config[p];
}
this.box = document.getElementById(container);
this.tmpH = 0;
var _this = this;
this.init = function(){
this.box.innerHTML += this.box.innerHTML;
this.timer = setTimeout(this.start,3000);
}
this.start = function(){
_this.timer = setInterval(function(){
_this.loop.call(_this);
},cfg.speed);
}
this.loop = function(){
if(this.tmpH < cfg.picH * cfg.count){
this.tmpH += 3;
if(this.tmpH > cfg.picH * cfg.count) this.tmpH = cfg.picH * cfg.count;
this.box.scrollTop = this.tmpH;
}else{
this.tmpH = 0;
for(var i = 0; i < cfg.count; i++){
this.box.appendChild(this.box.getElementsByTagName(cfg.tag)[0]);
}
this.box.scrollTop = 0;
clearInterval(this.timer);
this.timer = setTimeout(this.start,3000);
}
}
}
var mar = new Marquee("Marquee",{count:2,speed:30});
mar.init();
var mar2 = new Marquee("Marquee2");
mar2.init();
</script>