首页写一个跑马灯html代码

写一个跑马灯html代码

时间: 2024-05-18 17:03:11 浏览: 74

<!DOCTYPE html> <html> <head> <title>跑马灯</title> <style> @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .marquee { display: inline-block; white-space: nowrap; overflow: hidden; animation: marquee 10s linear infinite; } </style> </head> <body> <div class="marquee"> <span>这是一段跑马灯文字，可以自己添加内容。</span> </div> </body> </html>

html跑马灯文字代码

以下是一个基本的HTML跑马灯文字代码示例： ```html <marquee behavior="scroll" direction="left"> 这是跑马灯文字 </marquee> ``` 其中，`<marquee>` 标签用于创建一个跑马灯效果的区域。`behavior` 属性指定跑马灯的滚动方式，可以设置为 `"scroll"`（滚动）或 `"slide"`（滑动）。`direction` 属性指定跑马灯的滚动方向，可以设置为 `"left"`（向左滚动）、`"right"`（向右滚动）、`"up"`（向上滚动）或 `"down"`（向下滚动）。在跑马灯标签之间，可以插入要滚动的文字或其他内容。

用Javascript写一个跑马灯

好的，以下是用 JavaScript 写一个跑马灯的代码： HTML 代码： ``` <div id="marquee"> <p>这是跑马灯内容1</p> <p>这是跑马灯内容2</p> <p>这是跑马灯内容3</p> </div> ``` JavaScript 代码： ``` var marquee = document.getElementById("marquee"); var marqueeContent = marquee.innerHTML; var marqueeChild = marquee.children; var marqueeIndex = ; function startMarquee() { setInterval(function() { marqueeIndex++; if (marqueeIndex >= marqueeChild.length) { marqueeIndex = ; } marquee.innerHTML = marqueeContent + marqueeChild[marqueeIndex].outerHTML; }, 200); } startMarquee(); ``` 这个跑马灯会每隔 2 秒钟自动滚动一次，滚动到最后一个内容时会从头开始滚动。

阅读全文