在本文中，我们将使用 JavaScript 创建选取框文本。这个效果可以使用标签来实现，但是marquee已经被弃用，新网站不使用这个标签。仍然有一些浏览器支持这个标签，但为了安全起见，你不应该使用这个标签。下面是关于 marque 标签如何工作的示例。
示例：在本示例中，我们将使用 HTML 选取框标记。
HTML
Marquee tag example
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);
}
输出：结合以上三个部分后，我们将看到这样的内容。
