JavaScript 创建跑马灯文本效果

在本篇文章中，我们将使用JavaScript来创建跑马灯文本效果。这个效果可以使用< marquee>标签实现，但是这个标签已经 被弃用 ，现在的网站不再使用这个标签。尽管一些浏览器仍然支持这个标签，但为了保险起见，您不应该使用这个标签。以下是一个使用跑马灯标签的示例：

示例： 在这个示例中，我们将使用HTML跑马灯标签。

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Marquee tag example</title> 
</head> 
  
<body> 
    <marquee> 
        GeeksForGeeks | A computer science portal for geeks 
    </marquee> 
    <br><br><br><br> 
    <marquee direction="right"> 
        GeeksForGeeks | A computer science portal for geeks 
    </marquee> 
    <br><br><br><br> 
    <marquee direction="up"> 
        GeeksForGeeks | A computer science portal for geeks 
    </marquee> 
    <br><br><br><br> 
    <marquee direction="down"> 
        GeeksForGeeks | A computer science portal for geeks 
    </marquee> 
  
</body> 
  
</html>

输出：

注意： 不要在你的代码中使用marquee标签，因为它已经过时，将来可能会破坏你的代码。

使用Javascript： 为了避免marquee标签过时，你可以实现自己的JavaScript代码来实现此效果。首先，我们创建一个HTML框架。创建一个div标签，div标签内部创建一些包含文本的标签。

HTML代码： 在这一部分，我们将创建文件的基本结构。

CSS代码： 现在给代码添加一些CSS。在包含所有标签的包装div中，将overflow属性设置为hidden（这是必要的），并设置背景颜色、边框和宽度。在标签中应有三个必要的属性：white-space、float和clear。white-space应设置为nowrap，float应设置为left，clear应设置为both，还可以根据需要添加其他设计属性。

JavaScript代码： 现在是添加移动文本逻辑的主要部分。我们所做的是减小元素的margin-left属性，当元素变得不可见时，我们再次将margin-left赋值为元素所在父元素的宽度。以下是实现此逻辑的逐步过程。

创建一个名为elementWidth的变量，并将其赋值为元素的offsetWidth。
创建一个名为parentWidth的变量，并将其赋值为元素的父元素的offsetWidth。
创建一个名为flag的变量，并将其初始化为0。
创建一个10毫秒刷新率的setInterval。
在每个Interval中，减小flag的值，并将该值设置为margin-left属性。
如果flag的负值等于元素的宽度，则将margin-left的值设置为父元素的宽度。

<!DOCTYPE html> 
<html> 
<body> 
    <div id="main"> 
        <p class="para" id="para1"> 
            Geeksforgeeks |  
            A computer science portal for geeks 
        </p> 
  
        <p class="para" id="para2"> 
            This is another text 
        </p> 
  
        <p class="para" id="para3"> 
            This is the third line of the  
            example line of the example. 
        </p> 
  
    </div> 
</body> 
  
</html>

CSS代码

<style> 
  #main{ 
      border: 1px solid; 
      background: yellow; 
      width: 100%; 
      overflow: hidden; 
     } 
  
    .para{ 
      color: black; 
      font-weight: bold; 
      white-space: nowrap; 
      clear: both; 
      float: left; 
    } 
</style>

JavaScript代码

const para1 = document.getElementById("para1"); 
const para2 = document.getElementById("para2"); 
const para3 = document.getElementById("para3"); 
  
animate(para1); 
animate(para2); 
animate(para3); 
  
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); 
}

输出： 在合并上述三个部分后，我们会看到像这样的东西。

JavaScript 创建跑马灯文本效果