在 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中文網其他相關文章！