js实现的单行文本不间断无缝滚动效果（荧光屏文字滚动效果）

本章节介绍一下如何利用原生javascript实现但行文本的不简单无缝滚动效果。

这种效果在大量的网站都有使用，站点的公告或者其他功能一般会采用这种形式，下面就通过代码实例简单介绍一下。

代码如下:

     
     
      
      
       
       
        
         
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
            
              27 
             
            
              28 
             
            
              29 
             
            
              30 
             
            
              31 
             
             
              
              <!DOCTYPE html>  
              
              
              < 
              html 
              >  
              
              
              < 
              head 
              >  
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              >  
              
              
              < 
              title 
              >荧光屏文字 滚动效果</ 
              title 
              >  
              
              
              < 
              style  
              type 
              = 
              "text/css" 
              > 
              
              
              #scrollobj{ 
              
              
                 
              white-space:nowrap; 
              
              
                 
              overflow:hidden; 
              
              
                 
              width:200px; 
              
              
                 
              margin:50px; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script  
              type 
              = 
              "text/javascript" 
              > 
              
              
              function scroll(obj){ 
              
              
                 
              var tmp=(obj.scrollLeft)++; 
              
              
                 
              if(obj.scrollLeft==tmp){ 
              
              
                   
              obj.innerHTML += obj.innerHTML; 
              
              
                 
              } 
              
              
                 
              if(obj.scrollLeft>=obj.firstChild.offsetWidth){ 
              
              
                   
              obj.scrollLeft=0; 
              
              
                 
              } 
              
              
              } 
              
              
              setInterval("scroll(document.getElementById('scrollobj'))",20); 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
              < 
              div  
              id 
              = 
              "scrollobj" 
              >欢迎您，只有努力奋斗才会有美好的未来。</ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >