不间断可变跑马灯

最新推荐文章于 2025-05-25 22:05:53 发布

原创最新推荐文章于 2025-05-25 22:05:53 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #timer #div #table #html #任务

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

近期的任务中需要增添一个文字跑马灯，之前都是使用marquee标签来着。

不过这次客户对marquee的跑马灯移动过去后的大量留白很不满意，需要一个不间断的跑马灯。

代码如下

<html>
    <head>
        <style type="text/css">
            #marDiv {
                overflow:hidden;
                width:650px;
            }
        </style>
    </head>
    
    <body>
        <b>原本的跑马灯</b><br/>
        <div style="width:650">
            <marquee id="marquee_bar" onmouseover='this.stop();'onmouseout='this.start();' direction='left'            

scrollamount='5'>        
            君不见黄河之水天上来，奔流到海不复还。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我才

必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。
            </marquee>
        </div>
        <hr/>
        <b>不间断的跑马灯</b><br/>
        <div id="marDiv">
            <table>
                <tr>
                    <td id="text1">
                        <table>
                            <tr>
                                <td>
                                <nobr>
                                    <div id="marContent" style="width=650px;">
                                    </div>
                                </nobr>
                                <td>
                            </tr>
                        </table>
                    </td>
                    <td id="text2">
                    </td>
                </tr>
            </table>
        </div>

<button onclick="getWidth('君不见黄河之水天上来，奔流到海不复还。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我才

必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。');">将进酒</button>
<br/>
<button onclick="getWidth('一二三四五六七八九十');">一二三</button>
<br/>
<button onclick="getWidth('喝多了');">喝多了</button>
<br/>
<button onclick="getWidth('啊啊啊啊啊啊啊啊啊啊');">星期五</button>


<script type="text/javascript">

var Speed=20;
var timer;
var marDiv = document.getElementById("marDiv");
var text2= document.getElementById("text2");

function getWidth(str) {
    var marContent = document.getElementById("marContent");
    marContent.innerHTML=str;
    text2.innerHTML=document.getElementById("text1").innerHTML;
}

window.onload = function(){

    function picMarquee(){
        if(text2.offsetWidth - marDiv.scrollLeft <= 0){
            marDiv.scrollLeft = 0;
        }else{
            marDiv.scrollLeft+=2;
        }
    }

    timer=setInterval(picMarquee,Speed);
    marDiv.onmouseover=function(){
        clearInterval(timer);
    }
    marDiv.onmouseout=function(){
        timer=setInterval(picMarquee,Speed);
    }
};
</script>


    </body>
</html>

思路是在一个固定宽度的div中放入两列同宽度的相同数据，第一列移动过去后移动第二列，第二列也移动过去时重新复位。

总结：IE8.0测试可行

学到了一个神奇的标签<nobr>

缺点是宽度是写死的，修改的话需要更改style