在 HTML 中移动文本

在 HTML 中移动文本也称为滚动文本。我们可以以一定的时间间隔速度向各个方向滚动文本。 标签用于进行下一步操作。文本滚动有 4 个方向，即左方向、右方向、上方向、下方向。通过设置行为属性在封闭区域内移动文本。

实时示例： 假设我们的网站上经常有重要的更新内容。如果内容始终稳定，用户就无法关注该内容，因此为了吸引用户的注意力，我们必须始终滚动更新的内容。根据用户的要求，我们可以指示内容滚动到哪一侧。达到这个要求使用标签。

为什么我们在 HTML 中使用 CSS？

提供所有页面之间通用的逻辑；我们不再在每个 HTML 页面中编写相同的样式逻辑，而是使用 CSS 文件来编写通用逻辑。并在每个 HTML 页面中使用 包含此 CSS 页面。标签。

Marquee 标签在 HTML 中如何工作？

可以通过应用来移动内容如果我们在marquee标签内设置direction属性，那么根据方向，属性值内容将会移动。

语法 #1

<marquee>
//some text to move
</marquee>

语法#2

<marquee direction="”left" or right up down>
//some text to move
</marquee>

语法#3

<marquee behavior="alternate"> //it makes the text back direction by touching the border of the page.
//some text to move
</marquee>

语法#4

<marquee direction="”left”" scrollamount="5">// scrollamount used to set the scrolling text speed
//some text to move
</marquee>

注意：如果我们没有提供任何方向属性，默认选取框方向是离开。

在 HTML 中实现移动文本的示例

以下是提到的示例：

示例#1

默认字幕标签

代码：

<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee>
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>

输出：

说明：正如您在上面的文本中看到的，即使我们没有提及任何方向，它也是从右向左移动的，因此它是默认的选取框标签。

示例#2

选框标签位于正确的方向。

代码：

<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee direction="right">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>

输出：

说明：如上面的文字所示，通过将方向属性设置为右侧，从左向右移动。

示例 #3

顶部方向的字幕

代码：

<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee direction="up">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>

输出：

说明：如上面的文字所示，通过将方向属性设置为向上，从下到上移动。

示例#4

底部方向的选框。

代码：

<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee direction="down">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>

输出：

说明：如上面的文字所示，通过将方向属性设置为向下，从上到下移动。

示例#5

具有行为属性的字幕。

代码：

<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>

输出：

说明：如上面的文字所示，通过将行为属性设置为alternate，通过触摸边框从左到右和从右到左移动。

示例 #6

具有滚动量属性的字幕。

代码：

<title>Move Text</title>
<style>
body {
background-color: fuchsia;
text-align: center;
color: white;
font-family: Arial;
border: solid 2px red;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee direction="left" scrollamount="2">
Paramesh
</marquee>
<marquee scrollamount="4">
Amardeep
</marquee>
<marquee scrollamount="6">
Harinath-Rajitha
</marquee>

输出：

说明：正如您在上面的文字中看到的，从右向左移动的时间不同，因此它们都位于不同的位置。

结论

通过 marquee 标签实现 HTML 中文本的移动。我们可以根据需要对文本进行左、右、上、下移动。此字幕功能主要用于电视频道定期更新以吸引用户注意力。

以上是在 HTML 中移动文本的详细内容。更多信息请关注PHP中文网其他相关文章！