javascript实现文字无缝滚动效果

2023年6月11日下午12:21 • JavaScript

当我们需要在网页中展示一些较长的文字或新闻时，在有限的空间内显示全部内容是不现实的。这时，我们可以使用文字无缝滚动效果，将文字平滑滚动，以便在有限的空间内展示全部的内容。下面是javascript实现文字无缝滚动效果的完整攻略。

实现思路

首先，在HTML中创建一个容器，用来放置要滚动的文字。
使用CSS为容器设置样式，包括宽度、高度、背景色等，以及设置文字样式，如字体、字号、颜色等。
使用JavaScript编写一个函数，实现文字的滚动效果。具体实现方法如下：
创建一个定时器，在每个固定时间间隔内，将文字向左滚动。
检查文字是否已经滚动到了容器的左侧边缘。如果是，则将文字瞬间移动到容器右侧，继续滚动。
如果用户鼠标在容器上方移动，停止定时器，禁用滚动效果。当鼠标移开时，重新启用定时器，继续滚动。

代码示例

以下是一个简单的文字无缝滚动的代码示例，通过设置定时器实现：

<html>
    <head>
        <style>
            #scroll-container {
                overflow: hidden;
                height: 50px;
                background-color: #f2f2f2;
                font-size: 24px;
                font-family: Arial, sans-serif;
                color: #666666;
            }
        </style>
    </head>
    <body>
        <div id="scroll-container">
            <span id="scroll-text">这是一段要滚动的文字，这是一段要滚动的文字，这是一段要滚动的文字，这是一段要滚动的文字，这是一段要滚动的文字，这是一段要滚动的文字，</span>
        </div>
        <script>
            var container = document.getElementById('scroll-container');
            var text = document.getElementById('scroll-text');

            var scroll = function() {
                container.scrollLeft += 1;
                if (container.scrollLeft >= text.offsetWidth) {
                    container.scrollLeft = 0;
                }
            }
            var intervalId = setInterval(scroll, 20);

            container.onmouseover = function() {
                clearInterval(intervalId);
            }

            container.onmouseout = function() {
                intervalId = setInterval(scroll, 20);
            }
        </script>
    </body>
</html>

以上示例代码中，我们创建了一个带有滚动效果的文字容器，包括滚动条的显示和隐藏和onmouseover和onmouseout事件的监听，当用户鼠标在容器上方移动时停止/启动滚动。