JavaScript滚动程序问题
我正试图将下面的JavaScript滚动条合并到一个网站中,但一旦我将其包含在一个HTML页面中,该页面的布局(如Tables/div),它似乎会中断,并且不会显示。我想知道是否有人有什么建议JavaScript滚动程序问题,javascript,scroll,Javascript,Scroll,我正试图将下面的JavaScript滚动条合并到一个网站中,但一旦我将其包含在一个HTML页面中,该页面的布局(如Tables/div),它似乎会中断,并且不会显示。我想知道是否有人有什么建议 <script language="javascript"> //ENTER CONTENT TO SCROLL BELOW. var content='Content to be scrolled'; var boxheight=150; // BACKGROUND BOX
<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>
//输入要在下面滚动的内容。
var content='content to scroll';
var boxheight=150;//以像素为单位的背景框高度。
var boxwidth=150;//以像素为单位的背景框宽度。
var boxcolor=“#E9F0F8”//背景框颜色。
var速度=50;//以毫秒为单位的滚动速度(1秒=1000毫秒)。。
var pixelstep=2;//每个重复的像素“步数”。
var godown=false;//自上而下=真,自下而上=假
//请勿编辑超过此点的内容
变量外部、内部、元素高度、参考、参考x、参考y;
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='';
如果(ns4){
txt+='';
txt+='';
txt+=“”
txt+='';
txt+=''+内容+'';
txt+='';
}否则{
txt+='';
txt+='';
txt+=''+内容+'';
txt+='';
}
document.write(txt);
函数getElHeight(el){
如果(ns4)返回(el.document.height)?el.document.height:el.clip.bottom-el.clip.top;
如果(ie4 | | ie5)返回(el.style.height)?el.style.height:el.clientHeight;
else返回(el.style.height)?parseInt(el.style.height):parseInt(el.offsetHeight);
}
函数getPageLeft(el){
var x;
如果(ns4)返回el.pageX;
如果(ie4 | | w3c){
x=0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
返回x;
}}
函数getPageTop(el){
变量y;
如果(ns4)返回el.pageY;
如果(ie4 | | w3c){
y=0;
while(el.offsetParent!=null){
y+=标高偏移;
el=el.offsetParent;
}
y+=标高偏移;
返回y;
}}
函数scrollbox(){
如果(ns4){
内部.top+=(货仓)?pixelstep:-pixelstep;
如果(货仓){
如果(inner.top>boxheight)inner.top=-elementheight;
}否则{
if(inner.topboxheight)inner.style.top=-elementheight+'px';
}否则{
如果(parseInt(inner.style.top)我知道我没有回答你的问题,但这至少能帮助我今晚睡觉。:)
我不确定您到底想做什么,但我不会使用该脚本。我猜您是从某个地方复制并粘贴了它,但它看起来像是几年前编写的,并且现在并没有真正满足JavaScript的许多最佳实践准则
如果您正在寻找这些类型效果的脚本和库,我建议您查看:
- jQuery
- 原型,-
- 道场
- MooTools,-
- 摩奇基特-
如果你非要逼我这么做,我会推荐jQuery。当然,除了学习JavaScript,这是使用上述任何库所必需的。你的脚本非常旧(IE4,Netscape时代…),它使用(ilayer,layer)
继续,有一些jQuery替代方案可能适合您的需要,比如或这样。啊,我的眼睛!护目镜什么都不做;)您一定要遵循一些人已经提出的建议,放弃这个脚本
如果您必须使用它,以下是一些观察结果:
忽略整个ns4
代码部分,上述内容将在今天的浏览器中被打破,因为宽度
和高度
css规则将应用于#ref
、#外部
和#内部
元素缺少一个“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>';
txt+='';
txt+='';
txt+=''+内容+'';
注意添加的“px”
我不知道这段代码是否附带说明,但从文档的外观来看。请将需要放置在
中的行写在页面中希望出现此滚动内容(或任何内容)的位置
ps这是一堆糟糕的代码。我完全同意。我在JavaScript方面遇到了麻烦,这是一个老问题,是我的一位用户提出的,他想知道我是否解决了这个问题。谢谢你的建议