求助
什么都不能 2007-05-21 05:26:15 让aaaaaaaaaaa,bbbbbbb,ccccccccc在一行上显示,限DIV
-----------
<html>
<head>
<script language="javascript">
/*
* @function:
* @author:hanpoyangtitan
* @param: width,height,speed,panel,directin,item
* @date:2007-5-21
*/
function Marquee(width,height,delay,panel,direction)
{
this._w=width; //外层容器宽度
this._h=height; //外层容器高度
this._delay=delay; //滚动的速度
this.panel=panel;
this.container=null;
this.scrollBox_1=null;
this.scrollBox_2=null;
this._d=direction; //方向
this._arr=[]; //滚动的内容
}
Marquee.prototype.push=function(str)
{
this._arr.push(str);
}
Marquee.prototype.init=function()
{
var itemstring="";
for(var i=0;i<this._arr.length;i++)
{
itemstring+=this._arr[i];
}
this.container=document.createElement("DIV");
this.panel.appendChild(this.container);
this.container.style.width=this._w;
this.container.style.height=this._h;
this.scrollBox_1=document.createElement("DIV");
this.scrollBox_2=document.createElement("DIV");
this.container.appendChild(this.scrollBox_1);
this.container.appendChild(this.scrollBox_2);
this.scrollBox_1.innerHTML=itemstring;
this.scrollBox_2.innerHTML=itemstring;
if(this._d=="left" || this._d=="right")
{
this.container.style.overflowX="hidden";
this.scrollBox_1.className="b1";
this.scrollBox_2.className="b1";
this.scrollBox_1.style.height=this._h;
this.scrollBox_2.style.height=this._h;
}
else if(this._d=="up" || this._d=="down")
{
this.container.style.overflowY="hidden";
this.scrollBox_1.style.width=this._w;
this.scrollBox_2.style.width=this._w;
if(this._d=="down")
{
this.container.scrollTop=this.container.scrollHeight;
}
}
this.scroll();
}
Marquee.prototype.scroll=function()
{
switch(this._d)
{
case "left":
if(this.container.scrollLeft-this.scrollBox_1.offsetWidth>=0)
{
this.container.scrollLeft-=this.scrollBox_1.offsetWidth;
}
this.container.scrollLeft++;
break;
case "right":
if(this.container.scrollLeft-this.scrollBox_1.offsetWidth<=(0-this.container.offsetWidth))
{
this.container.scrollLeft+=this.scrollBox_1.offsetWidth;
}
this.container.scrollLeft--;
break;
case "up":
if(this.container.scrollTop-this.scrollBox_1.offsetHeight>=0)
{
this.container.scrollTop-=this.scrollBox_1.offsetHeight;
}
this.container.scrollTop++;
break;
case "down":
if(this.container.scrollTop-this.scrollBox_1.offsetHeight<=(0-this.container.offsetHeight))
{
this.container.scrollTop+=this.scrollBox_1.offsetHeight;
}
this.container.scrollTop--;
break;
default:
}
var obj=this;
setTimeout(function(){obj.scroll()},this._delay);
}
window.onload=function()
{
var m=new Marquee(200,25,100,document.getElementById("cc"),"left");
m.push("<div class=\"n1\">aaaaaaaaaaaaaaaa</div>");
m.push("<div class=\"n1\">bbbbbbbbbbbbbbbb</div>");
m.push("<div class=\"n1\">cccccccccccccccc</div>");
m.init();
}
/*
问题总结:当向下滚动时scrollTop=scrollHeight-container.offsetHeight
*/
function debug(str)
{
document.body.insertAdjacentHTML("BeforeEnd",str);
}
</script>
<style type="text/css">
li{
height:25px;
list-style:none;
}
.n1{
float:left;
height:25px;
border:1px solid blue;
}
.b1{
float;left;
}
</style>
</head>
<body>
<div id="cc" style="width:200; height:25; border:1px solid #EEEEEE; " ></div>
</body>
</html>