JavaScript 滚动问题

Question

我正在尝试将以下 JavaScript Scroller 合并到一个网站中，但是一旦我将它包含在一个具有布局的 HTML 页面中，例如。表格/DIV 似乎已损坏且不会显示。想知道是否有人有任何建议。

<script language="javascript">
//ENTER CONTENT TO SCROLL BELOW.
var content='Content to be scrolled';

var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#E9F0F8";   // BACKGROUND BOX COLOR.
var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var outer,inner,elementheight,ref,refX,refY;
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var txt='';
if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer  name="inner"  width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt);

function getElHeight(el){
if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
if(ns4)return el.pageX;
if(ie4||w3c){
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}}

function getPageTop(el){
var y;
if(ns4)return el.pageY;
if(ie4||w3c){
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}}

function scrollbox(){
if(ns4){
inner.top+=(godown)? pixelstep: -pixelstep;
if(godown){
if(inner.top>boxheight)inner.top=-elementheight;
}else{
if(inner.top<2-elementheight)inner.top=boxheight+2;
}}else{
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)', 400);
else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}}

window.onload=function(){
outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
elementheight=getElHeight(inner);
if(ns4){
outer.moveTo(getPageLeft(ref),getPageTop(ref));
outer.clip.width=boxwidth;
outer.clip.height=boxheight;
inner.top=(godown)? -elementheight : boxheight-2;
inner.clip.width=boxwidth-4;
inner.clip.height=elementheight;
outer.visibility="show";
inner.visibility="show";
}else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
}
setInterval('scrollbox()',speed);
}
</script>

Answer 1

我知道我没有回答你的问题，但这至少可以帮助我今晚入睡。 :)

我不确定你到底想做什么，但我不会使用那个脚本。我猜你是从某个地方复制和粘贴的，但它看起来好像是几年前写的，现在并不真正符合 JavaScript 的许多最佳实践指南。

如果您正在寻找此类效果的脚本和库，我建议您查看：

• jQuery, http://jquery.com/
• 原型，-http://www.prototypejs.org/
• 道场，-http://www.dojotoolkit.org/
• MooTools，-http://mootools.net/
• Mochikit，-http://mochikit.com/

如果你非要我一个，我会推荐 jQuery。当然，除了学习 JavaScript，这是使用上述任何库所必需的。 :)

Answer 2

您的脚本已经很老了（IE4、Netscape 时代...），它使用non standard tags（ilayer、layer）。

继续使用 Andy's recommendation，有一些 jQuery 替代品可能适合您的需求，例如 jdNewsScroll 或此 ScrollUp Headline Reader。

Answer 3

啊，我的眼睛！护目镜什么都不做；）你绝对应该听从几个人已经提出的一些建议，放弃这个脚本。

如果你必须使用它，这里有几点意见：

1. 忽略整个 ns4 代码部分，上述代码将在当今的浏览器中中断，因为 #ref、#outer 和 #inner 元素应用了 width 和 height css 规则"px" 量词。这些行需要阅读：

   txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';"></div>';
   txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden">';
   txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
   

   注意添加的"px"。

2. 我不知道这段代码是否附带说明，但从 document.write 行的外观来看，您需要将其放在您的 <body> 中，在页面中您想要滚动的位置出现的东西（或任何东西）。

ps 多么糟糕的一堆代码。