📌  相关文章
📜  使用 JavaScript 创建选取框文本效果

📅  最后修改于: 2021-08-31 07:44:04             🧑  作者: Mango

在本文中，我们将使用 JavaScript 创建选取框文本。这个效果可以使用标签来实现，但是marquee已经被弃用，新网站不使用这个标签。仍然有一些浏览器支持这个标签，但为了安全起见，你不应该使用这个标签。下面是关于 marque 标签如何工作的示例。

示例：在本示例中，我们将使用 HTML 选取框标记。

HTML


  

    
    
    Marquee tag example

  

    
        GeeksForGeeks | A computer science portal for geeks
    
    




    
        GeeksForGeeks | A computer science portal for geeks
    
    




    
        GeeksForGeeks | A computer science portal for geeks
    
    




    
        GeeksForGeeks | A computer science portal for geeks
    
  

  

HTML



    

        

            Geeksforgeeks | 
            A computer science portal for geeks
        

  
        

            This is another text
        

  
        

            This is the third line of the 
            example line of the example.
        

  
    


  

CSS

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);
}

输出：

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

使用 Javascript ：为了避免 marquee 标签的弃用，您可以实现自己的 JavaScript 代码来实现此效果。首先，我们创建一个 HTML 骨架。创建一个div标签并在 div 标签内创建一些 < p > 标签来保存您的文本。

HTML代码：

HTML 




    

        

            Geeksforgeeks | 
            A computer science portal for geeks
        

  
        

            This is another text
        

  
        

            This is the third line of the 
            example line of the example.
        

  
    


  

CSS 代码：现在向代码中添加一些 CSS。在包装器 div(所有

标签所在的位置)中隐藏溢出(这是必要的)并设置您选择的背景颜色、边框和宽度。在

标签中应该有三个必要的属性white-space、float和 clear。 white-space 应该设置为nowrap ， float 设置为left ， clear 设置为both和您选择的其他设计属性。

CSS

JavaScript 代码：现在是添加逻辑以移动文本的主要部分。我们所做的是减少

元素的 margin-left 属性，当元素变得不可见时，我们再次分配 margin-left 等于

元素的父元素的宽度。这些是实现此逻辑的分步过程。

  • 创建一个名为 elementWidth 的变量并分配

    元素的 offsetWidth

  • 创建变量名 parentWidth 并分配

    元素的父元素的 offsetWidth。

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

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);
}

输出：结合以上三个部分后，我们将看到这样的内容。