Marquee首尾相连不间断移动 开始完全显示

实现首尾相连的Marquee效果，并且在开始时完整显示内容。而不是从左边渐渐移动出来！

有时很需要类似效果！发布出来。

< html >
< title > 模拟Marquee实现首尾想连的移动效果 </ title >
< head >
< style >
.col_kx  {  OVERFLOW :  hidden ;  WIDTH :  700px  }
</ style >
</ head >
< body >

< div  id ="header_demo"  class ="col_kx" >
< table  border ="0"  cellspacing ="0"  cellpadding ="0" >
     < tr >
         < td  id ="header_demo1"  nowrap >
             <!-- 滚动头条 -->                                                                        
          < a  href ="" > 新婚夫妇如何理财 </ a >   < a  href ="" > 原创连载之-----70男和80女的同居理财故事 (2) </ a >   < a  href ="" > 魂牵梦萦人 </ a >
           < a  href ="" > 金融直播室 </ a >   < a  href ="" > 魂牵梦萦人 </ a >  
         < td  id ="header_demo2"  nowrap ></ td >
     </ tr >
</ table >
</ div >
< script >

// 滚动头条
// 滚动效果
var  header_demo  =  document.getElementById( " header_demo " );
var  header_demo1  =  document.getElementById( " header_demo1 " );
var  header_demo2  =  document.getElementById( " header_demo2 " );
var  speed = 20 ;     // 数值越大滚动速度越慢
header_demo2.innerHTML  =  header_demo1.innerHTML;

// header_demo2.offsetWidth 总宽度 
alert(header_demo2.offsetWidth  + " - " + header_demo.scrollLeft);

function  Marquee(){
     if (header_demo2.offsetWidth - header_demo.scrollLeft <= 0 )
        header_demo.scrollLeft -= header_demo1.offsetWidth
     else {
        header_demo.scrollLeft ++
    }
}
var  MyMar  =  setInterval(Marquee,speed);
header_demo.onmouseover  =   function (){clearInterval(MyMar)}
header_demo.onmouseout  =   function (){MyMar  =  setInterval(Marquee,speed)}
</ script >

</ body >
</ html >