当前位置：首页 > 前端开发 > 正文

html 如何实现图片滚动文字

HTML中，可以通过CSS实现图片滚动文字，使用` 标签包裹文字，并设置图片为背景“html，， 滚动的文字，，

HTML 中实现图片滚动文字有多种方法，以下为您详细介绍几种常见的方式及代码示例：

html 如何实现图片滚动文字 第1张

使用 marquee 标签（已过时，不推荐用于现代网页开发）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">图片滚动文字示例</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .image-box {
            width: 100%;
            height: 100%;
        }
        .text-box {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
            font-weight: bold;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="your-image.jpg" alt="Image" class="image-box">
        <div class="text-box"><marquee>这里是滚动的文字内容</marquee></div>
    </div>
</body>
</html>

在这个示例中,我们首先创建了一个容器 container，设置了固定的宽度和高度，并使用 overflow: hidden 隐藏超出部分，然后放置了一张图片 image-box，接着在图片上方添加了一个文字容器 text-box，使用 position: absolute 定位到图片中间位置，最后使用 marquee 标签实现文字的滚动效果，不过需要注意的是，marquee 标签在 HTML5 中已被废弃，虽然在一些浏览器中可能仍然有效，但不推荐在现代网页开发中使用，因为它不符合标准且缺乏灵活性和可控性。

使用 CSS 动画实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">图片滚动文字示例</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .image-box {
            width: 100%;
            height: 100%;
        }
        .text-box {
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
            font-weight: bold;
            white-space: nowrap;
            animation: scrollText 10s linear infinite;
        }
        @keyframes scrollText {
            0% { left: 100%; }
            100% { left: -100%; }
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="your-image.jpg" alt="Image" class="image-box">
        <div class="text-box">这里是滚动的文字内容</div>
    </div>
</body>
</html>

此方法通过 CSS 动画来实现文字滚动，同样先构建容器和图片元素，文字容器 text-box 初始位置设置在容器右侧外面（left: 100%），然后定义了一个 scrollText 的关键帧动画，在动画过程中，将文字从右侧逐渐移动到左侧，当动画结束时，文字完全移出容器左侧，由于设置了 infinite，动画会无限循环，从而实现持续滚动的效果，这种方式相比 marquee 标签更加灵活，可以通过调整动画的持续时间、运动方向等属性来定制滚动效果。

使用 JavaScript 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">图片滚动文字示例</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .image-box {
            width: 100%;
            height: 100%;
        }
        .text-box {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
            font-weight: bold;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="your-image.jpg" alt="Image" class="image-box">
        <div class="text-box" id="scrollText">这里是滚动的文字内容</div>
    </div>
    <script>
        const textBox = document.getElementById('scrollText');
        let posX = textBox.offsetWidth;
        const containerWidth = textBox.parentElement.offsetWidth;
        function scroll() {
            posX -= 1;
            if (posX + textBox.offsetWidth < 0) {
                posX = containerWidth;
            }
            textBox.style.left = posX + 'px';
            requestAnimationFrame(scroll);
        }
        scroll();
    </script>
</body>
</html>

这里利用 JavaScript 来实现文字滚动，首先获取文字容器 textBox 的初始位置和宽度，以及父容器的宽度，然后定义一个 scroll 函数，在函数中不断减小文字容器的 left 值，使其向左移动，当文字完全移出容器后，将 left 值重置为容器宽度，让文字从右侧重新开始滚动，通过 requestAnimationFrame 方法不断调用 scroll 函数，实现流畅的动画效果，这种方法可以实现更复杂的交互和控制，例如可以根据用户操作动态改变滚动速度、方向等。

FAQs

问题 1：如何改变文字滚动的速度？

答：如果是使用 CSS 动画实现，可以通过修改 animation 属性中的时间值来改变滚动速度，将 animation: scrollText 10s linear infinite; 中的 10s 改为更小的值，如 5s，文字滚动速度就会加快；改为更大的值，如 20s，速度则会减慢，若是使用 JavaScript 实现，可以调整 scroll 函数中 posX -= 1; 这一行代码的值，将其改为 posX -= 2; 或更大数值，文字滚动速度会变快，改为更小数值则速度变慢。

问题 2：怎样让文字滚动到一半时停止？

答：对于 CSS 动画方式，CSS 本身没有直接的方法在动画中途精确停止，但可以通过添加和移除 CSS 类来间接控制，可以定义一个停止动画的 CSS 类，.paused { animation-play-state: paused; }，然后在需要停止动画的时候，通过 JavaScript 给文字容器添加这个类，如 textBox.classList.add('paused');，对于 JavaScript 实现的方式，可以在 scroll 函数中添加一个条件判断，当满足停止条件时，清除 requestAnimationFrame 的回调，例如设置一个标志变量 let isPaused = false;，在需要停止的地方将 isPaused 设为 true，然后在 scroll 函数开头添加 `if (isPaused) return;

图片滚动文字
0

相关文章