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

zoukankan html css js c++ java

【网摘】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>

查看全文

相关阅读:
SQL Server-数据库架构和对象、定义数据完整性（二）
SQL Server-语句类别、数据库范式、系统数据库组成（一）
ASP.NET WebAPi之断点续传下载（下）
ConcurrentDictionary线程不安全么，你难道没疑惑，你难道弄懂了么？
ASP.NET WebAPi之断点续传下载（中）
ASP.NET WebAPi之断点续传下载（上）
ASP.NET WebAPi（selfhost）之文件同步或异步上传
 JSTL fn:contains()函数
 用jstl标签判断一个字符串是否包含了另一个字符串
 fn:replace()函数

原文地址：https://www.cnblogs.com/ding0910/p/1790413.html