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>

posted @ 2013-07-16 12:05  nik2011  阅读(197)  评论(0)    收藏  举报