怎样实现以下的文字滚动效果？
下面是代码，可以存成html文件在浏览器中查看。要求是向上滚动的文字不要到上方框才消
失，离方框有一段距离（距离可调）就消失。试过很多方法，如padding、margin、z-inde
x等，都没有成功。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006),
see www.w3.org">
<title></title>
<style type="text/css">
#marqueecontainer{
? ?? ???position: relative;
? ?? ???width: 210px; /*marquee width */
? ?? ???height: 300px; /*marquee height */
? ?? ???overflow: hidden;
? ? border: 3px solid orange;
? ?? ???/*padding-left: 4px;*/
? ?? ???/*padding-bottom: 30px;*/
? ?? ???/*background-image: url(notice_bg.gif);
? ?? ???background-repeat: repeat-x;*/
? ?? ???/*z-index:-1;*/
}
#vmarquee{
? ? /*padding-top:20px;*/
? ?? ???/*left: 8px;*/
? ?? ???/*top: 58px;*/
}
</style>
<script type="text/javascript">
var delayb4scroll=1 ;//Specify initial delay before marquee starts to scroll on
page (2000=2 seconds)
var marqueespeed=2; //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 ;//Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var actualheight=''
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee");
cross_marquee.style.top=0;
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight;
var div=cross_marquee.cloneNode(true);
div.style.left='0px';
div.style.top=actualheight+'px';
// alert(div.style.top);
cross_marquee.appendChild(div);
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera
or Netscape 7x, add scrollbars to scroll and exit
??cross_marquee.style.height=marqueeheight+"px"
??cross_marquee.style.overflow="scroll"
??return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
//alert(parseInt(cross_marquee.style.top));
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top="0px"
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
</head>
<body>
<div id="marqueecontainer"仿宋_GB2312">speed=marqueespeed">
? ?<!--<div style="position:absolute;z-index:20;height:30px;background-color:wh
ite;"></div>-->
??<div id="vmarquee" style="position: absolute;">
? ?<p>line one</p>
? ?<p>line two</p>
? ?<p style="padding-bottom:180px;">line three</p>
??</div>
</div>
</body>
</html>
[解决办法]
再加个div，如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006),
see www.w3.org">
<title></title>
<style type="text/css">
#marqueecontainerbox{
position: relative;
width: 210px;
height: 300px;
border: 3px solid orange;
}
#marqueecontainer{
position: relative;
top: 10px;
left: 10px;
width: 190px;
height: 280px;
overflow: hidden;
}
#vmarquee{
}
</style>
</head>
<body>
<div id="marqueecontainerbox">
<div id="marqueecontainer">
<div id="vmarquee" style="position: absolute;">
<p>line one</p>
<p>line two</p>
<p style="padding-bottom:180px;">line three</p>
</div>
</div>
</div>
<body>
</html>
