【网摘】JS实现无间断向左滚动marquee

JS实现无间断marquee

<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <style type="text/css">
  .box {border:#c5e4ff 1px solid;margin-top:10px;}
  #foot {margin:0 auto;height:82px;padding:0 0 24px 0;width:901px;}
  #foot_mid {float:left;margin-top:24px;overflow:hidden;width:900px;}
  </style>
</HEAD>

<BODY>
<div id="foot" class="box">
        <div id="foot_left"></div>
        <div id="foot_mid">
            <table>
                <tr>
                    <td id="demo_b1" valign="bottom" align="center">
                        <table>
                            <tr>
                                <td width="118" valign="bottom"><img title="当乐网" src="http://www.uucun.com/images/p1.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="诺基亚" src="http://www.uucun.com/images/p2.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="3G门户" src="http://www.uucun.com/images/p3.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="Windows live" src="http://www.uucun.com/images/p4.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="搜狐" src="http://www.uucun.com/images/p5.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="飞信" src="http://www.uucun.com/images/p6.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="易查" src="http://www.uucun.com/images/p7.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="优视动景" src="http://www.uucun.com/images/p8.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="百度" src="http://www.uucun.com/images/p9.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="新浪网" src="http://www.uucun.com/images/p10.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="贝多" src="http://www.uucun.com/images/p11.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="移动书城" src="http://www.uucun.com/images/p12.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                <td width="118" valign="bottom"><img title="魅媒科技" src="http://www.uucun.com/images/p16.gif" width="88" height="31" border="0" style="margin-right:20px"></td>
                                </tr>
                        </table>
                    </td>
                    <td id="demo_b2" valign="top"><br><br></td>
                </tr>
            </table>
        </div>
        <div id="foot_right"></div>
    </div>
</BODY>

</HTML>
<script type="text/javascript">
var speed_b = 30;
document.getElementById('demo_b2').innerHTML = document.getElementById('demo_b1').innerHTML;
function Marquee_b(){
    if(document.getElementById('demo_b2').offsetWidth - document.getElementById('foot_mid').scrollLeft <= 0)
    {
        document.getElementById('foot_mid').scrollLeft -= document.getElementById('demo_b1').offsetWidth;
    }
    else
    {
        document.getElementById('foot_mid').scrollLeft++;
    }
}
var MyMar_b=setInterval(Marquee_b,speed_b);
document.getElementById('foot_mid').onmouseover = function() {clearInterval(MyMar_b);}
document.getElementById('foot_mid').onmouseout = function() {MyMar_b=setInterval(Marquee_b,speed_b);}
</script>