怎样实现以下的文字滚动效果？

下面是代码，可以存成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>

解决方案 »

  1.   

    再加个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>