在 HTML 中移動文字
html
html5
HTML Tutorial
HTML Properties
HTML tags
在 HTML 中移動文字也稱為捲動文字。我們可以以一定的時間間隔速度向各個方向滾動文字。 標籤用於進行下一步操作。文字滾動有 4 個方向，分別是左方向、右方向、上方向、下方向。透過設定行為屬性在封閉區域內移動文字。
即時範例： 假設我們的網站上經常有重要的更新內容。如果內容始終穩定，用戶就無法關注該內容，因此為了吸引用戶的注意力，我們必須始終滾動更新的內容。根據使用者的要求，我們可以指示內容滾動到哪一側。達到這個要求
為什麼我們在 HTML 中使用 CSS？
提供所有頁面之間通用的邏輯；我們不再在每個 HTML 頁面中編寫相同的樣式邏輯，而是使用 CSS 檔案來編寫通用邏輯。並在每個 HTML 頁面中使用 包含此 CSS 頁面。標籤。
Marquee 標籤在 HTML 中如何運作？
可以透過套用
文法 #1
<marquee> //some text to move </marquee>
登入後複製
文法#2
<marquee direction=”left or right or up or 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
預設字幕標籤
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>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>
</body>
</html>登入後複製
輸出：
說明：正如您在上面的文字中看到的，即使我們沒有提及任何方向，它也是從右向左移動的，因此它是預設的選取框標籤。
範例#2
選框標籤位於正確的方向。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>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>
</body>
</html>登入後複製
輸出：
說明：如上面的文字所示，透過將方向屬性設為右側，從左向右移動。
範例 #3
頂部方向的字幕
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>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>
</body>
</html>登入後複製
輸出：
說明：如上面的文字所示，透過將方向屬性設為向上，從下到上移動。
範例#4
底部方向的選框。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>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>
</body>
</html>登入後複製
輸出：
說明：如上面的文字所示，透過將方向屬性設為向下，從上到下移動。
範例#5
具有行為屬性的字幕。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>
</body>
</html>登入後複製
輸出：
說明：如上面的文字所示，透過將行為屬性設為alternate，透過觸摸邊框從左到右和從右到左移動。
範例 #6
具有滾動量屬性的字幕。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: fuchsia;
text-align: center;
color: white;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="left" scrollamount="2">
Paramesh
</marquee>
<marquee scrollamount="4">
Amardeep
</marquee>
<marquee scrollamount="6">
Harinath-Rajitha
</marquee>
</body>
</html>登入後複製
輸出：
說明：正如您在上面的文字中看到的，從右向左移動的時間不同，因此它們都位於不同的位置。
結論
透過 marquee 標籤實現 HTML 中文字的移動。我們可以根據需要對文字進行左、右、上、下移動。此字幕功能主要用於電視頻道定期更新以吸引用戶注意力。
以上是在 HTML 中移動文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055523無法在Windows 11中安裝？
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前
By DDD
<🎜>：種植花園 - 完整的突變指南
2 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
