跑马灯代码大全(html跑马灯文字代码)-不念博客

跑马灯（Marquee）效果是一种使文本或图片在页面上滚动的动画效果。

不念提供了一些跑马灯效果的代码示例，分别使用HTML、JavaScript和CSS实现。

1、使用HTML的`<marquee>`标签（已废弃，不推荐使用）：

<marquee direction="left" scrollamount="3">
    这是一条跑马灯效果的文本。
</marquee>

注意：<marquee>标签已经在HTML5中被废弃，不建议在新项目中使用，请使用JavaScript和CSS实现跑马灯效果。

2、使用JavaScript和CSS实现跑马灯效果：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯效果</title>
    <style>
        .marquee-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }
        
        .marquee-text {
            display: inline-block;
            position: absolute;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="marquee-container">
        <span class="marquee-text">这是一条跑马灯效果的文本。</span>
    </div>
    
    <script>
        const marqueeText = document.querySelector(".marquee-text");
        const marqueeContainer = document.querySelector(".marquee-container");
        let textWidth = marqueeText.offsetWidth;
        let containerWidth = marqueeContainer.offsetWidth;
        
        marqueeText.style.left = containerWidth + "px";
        
        function startMarquee() {
            const speed = 2;
            let currentPosition = parseInt(marqueeText.style.left, 10);
            
            if (-currentPosition >= textWidth) {
                marqueeText.style.left = containerWidth + "px";
            } else {
                marqueeText.style.left = (currentPosition - speed) + "px";
            }
            
            requestAnimationFrame(startMarquee);
        }
        
        startMarquee();
    </script>
</body>
</html>

上述示例展示了如何使用HTML、JavaScript和CSS实现跑马灯效果。

请注意，不同浏览器和设备上的效果可能略有不同。

在实际项目中，可以根据需要调整跑马灯的样式、速度和方向。

本站文章由不念博客原创，未经允许严禁转载！

THE END