Marquee

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>
            
<!--滚动头条-->                                                                        
         
<href="">新婚夫妇如何理财</a> <href="">原创连载之-----70男和80女的同居理财故事 (2)</a> <href="">魂牵梦萦人</a>

          
<href="">金融直播室</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>
  转自 http://www.cnblogs.com/eflylab/archive/2008/10/07/1305495.html

你可能感兴趣的:(UE)