水平滚动Marquee，当函数被调用时，我的文本坚持聚集在一起

我的建议是对#marqueeTxt:使用相对定位

#marqueeTxt1         {position: relative; padding: 4px 0 4px 0;}
...

此外，在定位上设置更长的间隔时间和额外的长度可能会更好：

间隔：

timeID = setInterval("moveText()", 100);

位置：

if(topPos < -600) {
   topPos = 300;

window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
var topPos= 20;
/* defineMarquee()
      Initializes the contents of the marquee, determines the
      top style positions of each marquee item, and sets the
      onclick event handlers for the document
*/
   function defineMarquee() {
   var topValue;
   var allElems = document.getElementsByTagName("*");
   for(var i = 0; i < allElems.length; i++){
      if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
   }
//Extract the "top" CSS class from marqueeTxt
   for(var i = 0; i < marqueeTxt.length; i++){
      if(marqueeTxt[i].getComputedStyle) {
         topValue = marqueeTxt[i].getPropertyValue("top")
         marqueeTxt[i].style.top = topValue +"px";
       }
      else if (marqueeTxt[i].currentStyle) {
          topValue = marqueeTxt[i].currentStyle("top");
          marqueeTxt[i].style.top = topValue +"px";
      }
     
   }
   
   document.getElementById("startMarquee").onclick = startMarquee;
   document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
      Starts the marquee in motion
*/
   function startMarquee() {
      if(marqueeOff ==  true) {
         timeID = setInterval("moveText()", 100);
         marqueeOff = false;
      }
   }
/* stopMarquee()
   Stops the Marquee
*/
   function stopMarquee() {
      clearInterval(timeID);
      marqueeOff = true;
   }  
/* moveText ()
   move the text within the marquee in a vertical direction
*/
   function moveText() {
   
   for(var i = 0; i < marqueeTxt.length; i++) {
      if(marqueeTxt[i].getComputedStyle) {
      topPos = parseInt(marqueeTxt.getPropertyValue("top"));  
   } 
   else if(marqueeTxt[i].currentStyle) {
      topPos = parseInt(marqueeTxt.currentStyle("top"));
   }
   if(topPos < -600) {
      topPos = 300;
   } else { topPos -= 1;
   }
   marqueeTxt[i].style.top = topPos + "px";
}
}

*                    {margin: 0px; padding: 0px}
body                 {font-size: 15px; font-family: Arial, Helvetica, sans-serif}
#pageContent         {position: absolute; top: 0px; left: 30px; width: 800px}
#links               {display: block; width: 100%; margin-bottom: 20px;
                      border-bottom: 1px solid rgb(0,153, 102); float: left}
#links               {list-style-type: none}
#links li            {display: block; float: left; text-align: center; width: 19%}
#links li a          {display: block; width: 100%; text-decoration: none; color: black;
                      background-color: white}
#links li a:hover    {color: white; background-color: rgb(0,153,102)}
#leftCol             {clear: left; float: left}
h1                   {font-size: 24px; letter-spacing: 5px; color: rgb(0, 153,102)}
#main                {float: left; width: 450px; margin-left: 10px; 
                      padding-left: 10px; border-left: 1px solid rgb(0,153,102);
                      padding-bottom: 15px}
#main img            {float: right; margin: 0px 0px 10px 10px}
#main p              {margin-bottom: 10px}
address              {width: 100%; clear: left; font-style: normal; font-size: 12px;
                      border-top: 1px solid black; text-align: center;
                      padding-bottom: 15px}
.marquee             {position: absolute; top: 0px; left: 0px;
                      width: 280px; height: 300px;
                      background-color: rgb(0, 153, 102); color:white; 
                      border: 5px inset white; 
                      padding:0px; overflow:hidden; position:relative}
#marqueeTxt1         {font-size: 1.4em; letter-spacing: 0.15em; border-bottom: 1px solid white}
input                {width: 120px; margin: 5px; font-size: 0.9em}
#marqueeButtons      {width: 280px; text-align: center}
#marqueeTxt1         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt2         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt3         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt4         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt5         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt6         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt7         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt8         {position: relative; padding: 4px 0 4px 0;}
#marqueeTxt9         {position: relative; padding: 4px 0 4px 0;}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 3
   BYSO Web Page
   Author: Gavin Macken
   Date: 28 Feb `15  
   Filename:         byso.htm
   Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
   <title>Boise Youth Symphony Orchestra</title>
   <link href="bstyles.css" rel="stylesheet" type="text/css" />
   <script type = "text/javascript" src = "marquee.js"></script>
</head>
<body>
   <form id="marqueeForm" action="">
   <div id="pageContent">
      <div id="head"><img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" /></div>
      <ul id="links">
         <li><a href="#">Home Page</a></li>
         <li><a href="#">About BYSO</a></li>
         <li><a href="#">Our Director</a></li>
         <li><a href="#">Join BYSO</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
      <div id="leftCol">
      <div class="marquee">
         <div id="marqueeTxt1" class="marqueeTxt">
            Schedule of Events
         </div>
         <div id="marqueeTxt2" class="marqueeTxt">
            Holiday Concert<br />
            December 14, 7:30 PM<br /> 
            Boise Civic Center
         </div>
         <div id="marqueeTxt3" class="marqueeTxt">
            Christmas Concert<br /> 
            Dec. 16, 7 PM<br /> 
            Our Savior Episcopal Church
         </div>
         <div id="marqueeTxt4" class="marqueeTxt">
            Spring Concert<br />
            Feb. 27, 7 PM<br /> 
            Boise Civic Center
         </div>
         <div id="marqueeTxt5" class="marqueeTxt">
            Easter Fanfare<br />
            March 14, 9 PM<br />
            Our Savior Episcopal Church
         </div>
         <div id="marqueeTxt6" class="marqueeTxt">
            High School MusicFest<br />
            May 2, 3 PM<br />
            Boise Central High School
         </div>
         <div id="marqueeTxt7" class="marqueeTxt">
            Summer Concert<br />
            June 15, 7:30 PM<br />
            Frontier Concert Hall
         </div>
         <div id="marqueeTxt8" class="marqueeTxt">
            Fourth Fest<br />
            July 4, 4 PM<br />
            Canyon View Park
         </div>
         <div id="marqueeTxt9" class="marqueeTxt">
            Frontier Days<br />
            August 9, 1 PM<br />
            Boise Concert Hall
         </div>     
      </div>
      <div id="marqueeButtons">
         <input type="button" id="startMarquee" value="Start Marquee" />
         <input type="button" id="stopMarquee" value="Pause Marquee" />
      </div>
      </div>
      <div id="main">
         <h1>Boise Youth Symphony Orchestra</h1>
         <img src="byso.jpg" alt="" />
         <p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with 
            beautiful music while offering the highest quality musical training to over 
            1,000 teens throughout Idaho for the past 30 years. BYSO 
            has established an outstanding reputation for its high quality sound, its 
            series of commissioned works, and collaborations with prominent musical groups 
            such as the Idaho and Boise Symphony Orchestras, the Montana Chamber 
            Orchestra, the Boise Adult Choir and the Western Symphony Orchestra. 
            Last year the group was invited to serve as the U.S. representative to 
            the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
         <p>Leading this success for the past decade has been Boise Symphony artistic 
            director Denise Young. In a concert review by John Aehl, music critic for 
            the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that 
            the orchestra is playing better than ever."</p>
      </div>
    <address>
    BYSO &#183; 300 Mountain Lane &#183; Boise, Idaho  83702 &#183; (208) 555 - 9114
    </address>
   </div>
</form>
</body>
</html>

所以我设法解决了这个问题。感谢.getComputedStyle方法。感谢大家的帮助

window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
      Initializes the contents of the marquee, determines the
      top style positions of each marquee item, and sets the
      onclick event handlers for the document
*/
   function defineMarquee() {
   var topValue = 0;
   var allElems = document.getElementsByTagName("*");
   for(var i = 0; i < allElems.length; i++){
      if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
   }
//Extract the "top" CSS class from marqueeTxt
   for(var i = 0; i < marqueeTxt.length; i++){
      if (window.getComputedStyle) {
       topValue = document.defaultView.getComputedStyle(marqueeTxt[i]).getPropertyValue("top");}
       else if (marqueeTxt[i].currentStyle) {
         topValue = document.defaultView.marqueeTxt[i].currentStyle["top"];
       }
         marqueeTxt[i].style.top = topValue;
   }
 
   document.getElementById("startMarquee").onclick = startMarquee;
   document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
      Starts the marquee in motion
*/
   function startMarquee() {
      if(marqueeOff ==  true) {
         timeID = setInterval("moveText()", 50);
         marqueeOff = false;
      }
   }
/* stopMarquee()
   Stops the Marquee
*/
   function stopMarquee() {
      clearInterval(timeID);
      marqueeOff = true;
   }  
/* moveText ()
   move the text within the marquee in a vertical direction
*/
function moveText (){
for(var i = 0; i < marqueeTxt.length; i++) {
      
   topPos = parseInt(marqueeTxt[i].style.top);  
  
   if(topPos < -110) {
      topPos = 700;
   } else { topPos -= 1;
   }
   marqueeTxt[i].style.top = topPos + "px";
}
}

*                    {margin: 0px; padding: 0px}
body                 {font-size: 15px; font-family: Arial, Helvetica, sans-serif}
#pageContent         {position: absolute; top: 0px; left: 30px; width: 800px}
#links               {display: block; width: 100%; margin-bottom: 20px;
                      border-bottom: 1px solid rgb(0,153, 102); float: left}
#links               {list-style-type: none}
#links li            {display: block; float: left; text-align: center; width: 19%}
#links li a          {display: block; width: 100%; text-decoration: none; color: black;
                      background-color: white}
#links li a:hover    {color: white; background-color: rgb(0,153,102)}
#leftCol             {clear: left; float: left}
h1                   {font-size: 24px; letter-spacing: 5px; color: rgb(0, 153,102)}
#main                {float: left; width: 450px; margin-left: 10px; 
                      padding-left: 10px; border-left: 1px solid rgb(0,153,102);
                      padding-bottom: 15px}
#main img            {float: right; margin: 0px 0px 10px 10px}
#main p              {margin-bottom: 10px}
address              {width: 100%; clear: left; font-style: normal; font-size: 12px;
                      border-top: 1px solid black; text-align: center;
                      padding-bottom: 15px}
.marquee             {position: absolute; top: 0px; left: 0px;
                      width: 280px; height: 300px;
                      background-color: rgb(0, 153, 102); color:white; 
                      border: 5px inset white; 
                      padding:0px; overflow:hidden; position:relative}
#marqueeTxt1         {font-size: 1.4em; letter-spacing: 0.15em; border-bottom: 1px solid white}
input                {width: 120px; margin: 5px; font-size: 0.9em}
#marqueeButtons      {width: 280px; text-align: center}
#marqueeTxt1         {position: absolute; top: 40px; left: 20px}
#marqueeTxt2         {position: absolute; top: 90px; left: 20px}
#marqueeTxt3         {position: absolute; top: 170px; left: 20px}
#marqueeTxt4         {position: absolute; top: 250px; left: 20px}
#marqueeTxt5         {position: absolute; top: 330px; left: 20px}
#marqueeTxt6         {position: absolute; top: 410px; left: 20px}
#marqueeTxt7         {position: absolute; top: 490px; left: 20px}
#marqueeTxt8         {position: absolute; top: 570px; left: 20px}
#marqueeTxt9         {position: absolute; top: 640px; left: 20px}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 3
   BYSO Web Page
   Author: Gavin Macken
   Date: 28 Feb `15  
   Filename:         byso.htm
   Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
   <title>Boise Youth Symphony Orchestra</title>
   <link href="bstyles.css" rel="stylesheet" type="text/css" />
   <script type = "text/javascript" src = "marquee.js"></script>
</head>
<body>
   <form id="marqueeForm" action="">
   <div id="pageContent">
      <div id="head"><img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" /></div>
      <ul id="links">
         <li><a href="#">Home Page</a></li>
         <li><a href="#">About BYSO</a></li>
         <li><a href="#">Our Director</a></li>
         <li><a href="#">Join BYSO</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
      <div id="leftCol">
      <div class="marquee">
         <div id="marqueeTxt1" class="marqueeTxt">
            Schedule of Events
         </div>
         <div id="marqueeTxt2" class="marqueeTxt">
            Holiday Concert<br />
            December 14, 7:30 PM<br /> 
            Boise Civic Center
         </div>
         <div id="marqueeTxt3" class="marqueeTxt">
            Christmas Concert<br /> 
            Dec. 16, 7 PM<br /> 
            Our Savior Episcopal Church
         </div>
         <div id="marqueeTxt4" class="marqueeTxt">
            Spring Concert<br />
            Feb. 27, 7 PM<br /> 
            Boise Civic Center
         </div>
         <div id="marqueeTxt5" class="marqueeTxt">
            Easter Fanfare<br />
            March 14, 9 PM<br />
            Our Savior Episcopal Church
         </div>
         <div id="marqueeTxt6" class="marqueeTxt">
            High School MusicFest<br />
            May 2, 3 PM<br />
            Boise Central High School
         </div>
         <div id="marqueeTxt7" class="marqueeTxt">
            Summer Concert<br />
            June 15, 7:30 PM<br />
            Frontier Concert Hall
         </div>
         <div id="marqueeTxt8" class="marqueeTxt">
            Fourth Fest<br />
            July 4, 4 PM<br />
            Canyon View Park
         </div>
         <div id="marqueeTxt9" class="marqueeTxt">
            Frontier Days<br />
            August 9, 1 PM<br />
            Boise Concert Hall
         </div>     
      </div>
      <div id="marqueeButtons">
         <input type="button" id="startMarquee" value="Start Marquee" />
         <input type="button" id="stopMarquee" value="Pause Marquee" />
      </div>
      </div>
      <div id="main">
         <h1>Boise Youth Symphony Orchestra</h1>
         <img src="byso.jpg" alt="" />
         <p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with 
            beautiful music while offering the highest quality musical training to over 
            1,000 teens throughout Idaho for the past 30 years. BYSO 
            has established an outstanding reputation for its high quality sound, its 
            series of commissioned works, and collaborations with prominent musical groups 
            such as the Idaho and Boise Symphony Orchestras, the Montana Chamber 
            Orchestra, the Boise Adult Choir and the Western Symphony Orchestra. 
            Last year the group was invited to serve as the U.S. representative to 
            the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
         <p>Leading this success for the past decade has been Boise Symphony artistic 
            director Denise Young. In a concert review by John Aehl, music critic for 
            the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that 
            the orchestra is playing better than ever."</p>
      </div>
    <address>
    BYSO &#183; 300 Mountain Lane &#183; Boise, Idaho  83702 &#183; (208) 555 - 9114
    </address>
   </div>
</form>
</body>
</html>