跑马灯代码大全(html跑马灯文字代码)

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

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

图片[1]-跑马灯代码大全(html跑马灯文字代码)-不念博客

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
喜欢就支持一下吧
点赞112赞赏 分享
评论 抢沙发
头像
欢迎光临不念博客,留下您的想法和建议,祝您有愉快的一天~
提交
头像

昵称

取消
昵称代码图片

    暂无评论内容