maquee.js内容如下：
// JavaScript Document
var Marquee = function(id){
function $(id){return document.getElementById(id);}
var m = this, div = $(id), inner, width, height, style, direct;
inner = div.innerHTML; direct = 1;
this.width = 400; this.height = 300;
function resetCSS(){
if(div.style.width == null || div.style.width == ""){
div.style.width = m.width + "px";
} else {
m.width = parseInt(div.style.width);
}
if(div.style.height == null || div.style.height == ""){
div.style.height = m.height + "px";
} else {
m.height = parseInt(div.style.height);
}
style = "width:" + m.width + "px; height:" + m.height + "px; overflow:hidden; float:left;";
}
this.interval = 100; this.step = 1; this.timer = null;
this.stop = function(){ window.clearTimeout(m.timer); m.timer = null;}
this.MoveLeft=function(){createScrollX();m.stop();m.timer=window.setTimeout(marquee_left,m.interval);}
this.MoveRight=function(){createScrollX();m.stop();m.timer=window.setTimeout(marquee_right,m.interval);}
this.MoveUp=function(){createScrollY();m.stop();m.timer=window.setTimeout(marquee_up,m.interval);}
this.MoveDown=function(){createScrollY();m.stop();m.timer=window.setTimeout(marquee_down,m.interval);}
this.Continue = function(){switch(direct){case 1:m.MoveLeft();break;case 2:m.MoveRight();break;
case 3:m.MoveUp();break;case 4:m.MoveDown();break;default:m.MoveLeft();break;}}
div.onmouseover = m.stop; div.onmouseout = m.Continue;
function createScrollX(){
resetCSS(); div.style.overflowX="hidden"; div.style.overflowY="auto"; div.innerHTML="";
var odiv=document.createElement("DIV"); odiv.style.width=(m.width * 2) + "px";
div.appendChild(odiv);
createSubDiv(odiv);
}
function createScrollY(){
resetCSS(); div.style.overflowX="auto"; div.style.overflowY="hidden"; div.innerHTML="";
var odiv=document.createElement("DIV"); odiv.style.height=(m.height * 2) + "px";
div.appendChild(odiv);
createSubDiv(odiv);
}
function createSubDiv(parent){
var ldiv = document.createElement("DIV"); var rdiv = document.createElement("DIV");
ldiv.style.cssText = rdiv.style.cssText = style; ldiv.style.float = rdiv.style.float = "left";
ldiv.innerHTML = rdiv.innerHTML = inner;
parent.appendChild(ldiv); parent.appendChild(rdiv);
}
function marquee_left(){
if(div.scrollLeft - m.width >= 0){div.scrollLeft -= m.width;}else{div.scrollLeft += m.step;}
direct=1; m.timer = window.setTimeout(marquee_left, m.interval);
}
function marquee_right(){
if(div.scrollLeft <= 0){div.scrollLeft += m.width;}else{div.scrollLeft -= m.step;}
direct=2; m.timer = window.setTimeout(marquee_right, m.interval);
}
function marquee_up(){
if(div.scrollTop - m.height >= 0){div.scrollTop -= m.height;}else{div.scrollTop += m.step;}
direct=3; m.timer = window.setTimeout(marquee_up, m.interval);
}
function marquee_down(){
if(div.scrollTop <= 0){div.scrollTop += m.height;}else{div.scrollTop -= m.step;}
direct=4; m.timer = window.setTimeout(marquee_down, m.interval);
}
}
测试页面test.html内容如下：
<title>Jsmarquee</title>
<script language="javascript" src="marquee.js"></script>
<IMG onMouseOver="moveThis('left')" style="cursor: pointer" onmouseout=moveout() height=30
src="images/goleft.gif" width=8>
<div id="odiv" style=" height:78px;">
<ul>
<li>
<a href="news_content.asp?id=337" target="_blank" title="公交部分线路改道通告">
公交部分线路改道通告
</a>
(2010-3-9)
</li>
<li>
<a href="news_content.asp?id=211" target="_blank" title="关于组织实施“提升公交形象百日行动计划”的意见">
关于组织实施“提升公交形象百日行动计划”的意见
</a>
(2010-3-4)
</li>
<li>
<a href="news_content.asp?id=158" target="_blank" title="春运简报第20期">
春运简报第20期
</a>
(2010-3-2)
</li>
</ul>
</div>
<script language="javascript">
var mar = new Marquee("odiv");
mar.width = 300; mar.height = 200;
mar.step = 3;mar.interval = 100;
mar.MoveUp();
//mar.MoveLeft(); mar.MoveRight(); mar.MoveDown();
</script>
<IMG onMouseOver="moveThis('right')" style="CURSOR: pointer" onmouseout=moveout() height=30
src="images/goright.gif" width=8>