JavaScript 中的 Marquee 事件

2025年4月19日 | 阅读 4 分钟

在本文中，我们将了解 JavaScript 中的跑马灯事件。

JavaScript 是一种强大的编程语言，用于构建动态且交互式的网页，以吸引用户并为他们提供最佳体验。跑马灯事件是用于为网页添加动感的、常被忽视的特性之一。此事件用于使网页元素水平、垂直或以不同方向滚动。

什么是跑马灯？

跑马灯是一种特定效果，用于在网页上水平从右到左、从左到右，或垂直从上到下、从下到上滚动或移动元素。

HTML 中的跑马灯事件

Marquee 是用于添加滚动的 HTML 标签。首先，让我们看看如何使用 <marquee> 标签实现滚动效果。

HTML 中 <marquee> 标签的演示

演示 1：在以下演示中，我们将使用 <marquee> 标签。

代码

<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width"> 
	<title>Marquee tag</title> 
</head> 

<body> 
	<marquee> 
		Javatpoint | Online learning platform for learners. 
	</marquee> 
	<br> <br> <br> <br> <br> <br> 
	<marquee direction="up"> 
		Javatpoint | Online learning platform for learners. 
	</marquee> 
	<br> <br> <br> <br> <br> <br> 
	<marquee direction="down"> 
		Javatpoint | Online learning platform for learners. 
	</marquee> 
	<br> <br> <br> <br> <br> <br>  
	<marquee direction="right"> 
		Javatpoint | Online learning platform for learners. 
	</marquee> 

</body> 

</html>

输出

这里是输出，我们可以看到四行文本。第一行文本向左移动，第二行文本向右移动，第三行文本向下移动，第四行文本向上移动。

演示 2：在以下演示中，我们将不使用 <marquee> 标签来实现跑马灯效果。

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee effect without using the &gt;Marquee&gt; tag</title>
<style>
  .marquee {
    white-space: nowrap;
    overflow: hidden;
    font-size: 24px;
    color: rebeccapurple;
    background-color: lavender;
    animation: marquee 9s linear infinite;
  }
  
  @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>
<div class="marquee">
  <p>This is a horizontal marquee effect.</p>
</div>
</body>
</html>

输出

这里是输出，我们可以看到跑马灯效果，文本在网页上向左移动。

JavaScript 中的跑马灯事件

在 JavaScript 中，开发人员使用跑马灯事件在网页上创建滚动文本或滚动图像。跑马灯最初是以标签的形式在 HTML 中引入的，但在新版本 HTML5 中已弃用。

JavaScript 提供了一种实现相同功能的方法。我们可以结合使用 HTML、CSS 和 JavaScript 来实现跑马灯事件。

JavaScript 中跑马灯事件的演示

演示 1

我们将使用 HTML、CSS 和 JavaScript 在网页上创建跑马灯效果。

代码

<!DOCTYPE html> 
<html> 

<head> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width"> 
	<title>Marquee event in JavaScript</title>
	<style> 
#marquee { 
	border: 2px solid; 
	background: antiquewhite; 
	width: 100%; 
	overflow: hidden; 
	} 

	.line { 
	color: crimson; 
	font-weight: bold; 
	font-size: 24px;
	white-space: nowrap; 
	clear: both; 
	float: left; 
	} 
</style>

</head> 

<body>
	<div id="marquee"> 
		<p class="line" id="line1"> 
			Javatpoint | 
			Online tutorial website for learners.
		</p> 

		<p class="line" id="line2"> 
			This is another line. 
		</p> 

		<p class="line" id="line3"> 
			This is the third line. 
		</p>
	</div> 
<script>
	  const line1 = document.getElementById("line1"); 
    	  const line2 = document.getElementById("line2"); 
    	  const line3 = document.getElementById("line3"); 

    animate(line1); 
    animate(line2); 
    animate(line3); 

    function animate(element) { 
    	let elementWidth = element.offsetWidth; 
    	let parentWidth = element.parentElement.offsetWidth; 
    	let flag = 0; 
    
    	setInterval(() => { 
    		element.style.marginLeft = --flag + "px"; 
    
    	if (elementWidth == -flag) { 
			flag = parentWidth; 
		} 
	}, 10); 
} 

</script>
</body> 

</html>

输出

这里是输出，我们可以清楚地看到网页上有三行文本正在向左移动。

演示 2

我们将为网页上的文本创建跑马灯效果。

代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <title>Marquee effect in JavaScript</title>
    <style type="text/css" media="all">
      #marquee {
        color: darkmagenta;
        font-weight: normal;
        font-size: 24px;
      }
    </style>
     
</head>  
<body>  
    <h3>Marquee in JavaScript</h3>  
       <p id = "marquee"></p>  
<script type="text/javascript">  
    
    function scroll(n)  
    {  
        var text = "This is a marquee effect.";  
        var result = "";  
        var screen = document.getElementById("marquee");  
        for (var j = 0; j < n; j++)  
        {  
            result += text.charAt(j);  
        }  
        result += text.charAt(n);  
        screen.innerHTML = result;  
        n++;  
        if (n != text.length)  
        {  
            window.setTimeout(function () { scroll(n); }, 150);  
        }  
        else  
        {  
            window.setTimeout(function () { scroll(0); }, 4500);  
        }  
    }  
    scroll(0);  
</script>  
</body>  
</html> 

输出

这里是输出，我们可以在网页上看到移动的文本。

结论

在本文中，我们已经了解了 JavaScript 中的跑马灯事件。在 HTML 中，跑马灯效果是通过 <marquee> 标签实现的，但该标签在 HTML5 中已被禁止。现在，跑马灯效果是通过 HTML、CSS 和 JavaScript 的组合来实现的。

下一主题方法链 (Method Chaining)

JavaScript 中的 Marquee 事件

什么是跑马灯？

HTML 中的跑马灯事件

HTML 中 <marquee> 标签的演示

JavaScript 中的跑马灯事件

JavaScript 中跑马灯事件的演示

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 中的 Marquee 事件

什么是跑马灯？

HTML 中的跑马灯事件

HTML 中 <marquee> 标签的演示

JavaScript 中的跑马灯事件

JavaScript 中跑马灯事件的演示

结论

相关帖子

从 JavaScript 字符串中删除最后一个字符

JavaScript Clear Interval

在 JavaScript 中向列表添加元素

如何在 Chrome 中禁用 JavaScript

JavaScript 初学者练习

在 JavaScript 数组中获取对象索引

使用 JavaScript 的 TextEncoder 和 TextDecoder

JavaScript prompt()

如何在 JavaScript 中相加数字

在 JavaScript 中隐藏和显示 Div

订阅 Tpoint Tech