marquee实现不间断循环

最新推荐文章于 2026-04-22 03:08:41 发布

原创最新推荐文章于 2026-04-22 03:08:41 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#border #function #javascript #table #div

本文介绍了一种使用JavaScript实现的滚动横幅效果，通过设置定时器来控制横幅的滚动速度，并利用onmouseover和onmouseout事件来暂停和恢复滚动。

<div id="demoleft" style="OVERFLOW: hidden;width:990px;COLOR: #ffffff">
                <table border="0" cellpadding="0" cellspacing="0" >
                <tbody>
                <tr>
                <td id="demo1left" valign="top" align="middle">
                <table cellspacing=0 cellpadding="2" border="0">
                <tbody>
                <tr align="center">
                <td><img height="20" src="images/marquee.jpg" width="990" usemap="#Map4" border="0" alt="" /></td>
                </tr></tbody></table></td>
                <td id="demo2left" valign="top"></td></tr></tbody></table>
            </div>
            <script type="text/javascript" language="javascript">
                var speed=20//速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
                demo2left.innerHTML=demo1left.innerHTML
                function Marquee(){
                if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其实demo.scrollLeft是有最大值的，和demo0.width,引用的图片的width有关系。demo过了一半（每半内容一样的），重新开始循环
                demoleft.scrollLeft-=demo1left.offsetWidth
                else{
                demoleft.scrollLeft++//不断的增加，相当于父容器的滚动条不断是缩小；但由于OVERFLOW: hidden; （滚动条不可见）
                }
                }
                var MyMarleft=setInterval(Marquee,speed)
                demoleft.onmouseover=function() {clearInterval(MyMarleft)}
                demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
            </script>

//实现向左