JS实现滚动窗口

JS滚动窗口效果

最新推荐文章于 2025-06-17 14:58:29 发布

原创最新推荐文章于 2025-06-17 14:58:29 发布 · 939 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JS

Java web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的滚动窗口效果。通过设置定时器使窗口内的文字从右向左滚动，利用HTML和JavaScript结合的方式，展示了如何控制div元素的滚动条来达到所需的滚动效果。

这里写图片描述

<script type="text/javascript">
    window.onload = function(){
        var speed = 20;
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");
        td2.innerHTML = td1.innerHTML;

        var div1 = document.getElementById("div1");

        function goLeft(){
            if (td1.offsetWidth - div1.scrollLeft < 0) {
                div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;
            }else {
                div1.scrollLeft++;
            }
        }
        setInterval(goLeft,speed);
    }
</script>

<div id="div1" style="overflow:hidden;width:800px;height:50px;">
        <table style="width: 800px;height: 45px;background-color: silver;">
            <tr>
                <td id="td1">
                    <table style="width: 800px;height: 45px;background-color: silver;">
                        <tr>
                            <td align="center"><font size="5px" color=blue>JS实现滚动窗口</font></td>
                        </tr>
                    </table>
                </td>
                <td id="td2"></td>
            </tr>
        </table>
    </div>