[转载 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>

posted on 2008-06-18 10:57  真阿当  阅读(80)  评论(0编辑  收藏  举报