简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

HTML程式碼製作滾動文字

不言
發布： 2018-05-07 16:13:01
原創
5184 人瀏覽過

這篇文章主要介紹了關於HTML程式碼製作滾動文字，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

本節筆者講述HTML程式碼中比較特殊的標籤，它能使網頁中的文字滾動，並且可以控制其滾動的屬性。             

 製作捲動文字 透過本章前面的學習，讀者已經能夠很好地控制各種段落文字的顯示方式，不過無論怎麼設置，文字都是靜態的。

本節筆者講述HTML程式碼中較特殊的標籤，它能使網頁中的文字滾動，並且可以控制其滾動的屬性。             

製作捲動文字
透過本章前面的學習，讀者已經能夠很好地控制各種段落文字的顯示方式，不過無論怎麼設置，文字都是靜態的。本節筆者講述HTML程式碼中較特殊的標籤，它能使網頁中的文字滾動，並且可以控制其滾動的屬性。
4.3.1 設定文字捲動
HTML技術中讓文字捲動的方法是使用雙標籤。在HTML程式碼中可使其作用區文字滾動，預設為從右到左，循環滾動。在D:\web\目錄下建立網頁文件，命名為mar.htm，編寫程式碼4.15所示。
代碼4.15 文字捲動的設定：mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="5" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
</font>
</body>
</html>
登入後複製

在瀏覽器網址列輸入http://localhost/mar.htm，瀏覽效果如圖4.15所示。

圖4.15 設定文字滾動預設形式
從圖4.15可得，在未設定寬度時，標籤是獨佔一行的。
4.3.2 設定文字捲動的方向
標籤的direction屬性用於設定內容滾動方向，屬性值有left、right、up、down ，分別代表向左、向右、向上、向下，例如以下程式碼：
做人要厚道
做人要厚道
做人要厚道
做人要厚道
4.3.3 設定文字捲動的速度和形式
#設定文字捲動使用標籤，其屬性說明如下。
— 標籤的scrollamount屬性用來設定內容捲動速度。
— 標籤的behavior 屬性用於設定內容滾動方式，預設為scroll，即循環滾動，當其值為alternate時，內容將來回循環滾動。當其值為slide時，內容滾動一次即停止，不會循環。還有一個loop屬性可設定其滾動循環次數，預設為沒有限制。
— 標籤的scrolldelay屬性用來設定內容滾動的時間間隔。
— 標籤的bgcolor屬性用於設定內容捲動背景色（類似body的背景色設定）。
— 標籤的width 屬性用於設定內容滾動背景寬度。
— 標籤的height屬性用來設定內容滾動背景高度。
修改mar.htm網頁文件，編寫程式碼4.16所示。

代碼4.16 文字捲動的設定：mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="3" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
文字滚动示例（向右）：<marquee direction="right" scrolldelay="500">做人要厚道</marquee>
文字滚动示例（向下，滚动方式为slide，速度为10）：<marquee scrollamount="10" behavior="slide">做人要厚道</marquee>
文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：<marquee scrollamount="2" behavior="alternate" loop="3">做人要厚道</marquee>
文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up" bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>
</font>
</body>
</html>
登入後複製

在瀏覽器網址列輸入http://localhost/mar.htm，瀏覽效果如圖4.16所示。

圖4.16 文字滾動的不同形式
的眾多屬性能非常方便地製作滾動文字，在後面的JavaScript學習中，讀者將繼續深化標籤的動態行為學習。

相關推薦：

HTML程式碼實作簡易購物車


##

以上是HTML程式碼製作滾動文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
html 信 捲動
來源：php.cn
上一篇：Html製作簡單又漂亮的登入頁面 下一篇：html檔案的中文亂碼問題與在瀏覽器中的顯示問題
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在 PHP 中利用 VueJS 元件 我想混合由Php和VueJS元件產生的基本HTML，而不必一直使用VueJS到最低的dom葉子。父佈局應用了Vue應用程序，所有標頭、導航、旁注等都是Vue元件，大多數頁面上的主要...
來自於 2023-11-11 00:01:44
0
2
288
如何在 next js 13 中使用開放圖元標記？ 在最近的NextJS13更新中，他們引入了一種處理元標記的新方法，該方法與傳統方法不同，即創建NextHead並編寫常用的html元標記。在新方法中，我們建立一個類似元資料物件的方...
來自於 2023-11-10 23:03:51
0
1
527
PHP郵件傳送器無法正常運作：沒有錯誤日誌，訊息顯示已傳送，但未收到 我的網站伺服器的php錯誤日誌中沒有收到任何錯誤日誌。我嘗試過多個不同的SMTP伺服器（我知道的其他電子郵件提供者也可以使用）。這是我的HTML表單：<formaction=...
來自於 2023-11-10 15:02:39
0
1
218
只選擇月份和年份的v-date-picker 請告訴我是否有其他方法可以使用v-date-picker來執行此操作。我只希望用戶能夠選擇年份和月份，然後日期選擇器選單應該關閉。這是我的html作為範例，但我不介意使用不同的程式...
來自於 2023-11-10 14:05:05
0
1
269
重寫後的標題為：SweetAlert2: "onBeforeOpen" 參數未知 我正在使用Laravel5.8和Sweetalertv2，我嘗試用它在Blade上觸發此警報：Swal.fire({title:'<h4style="color:#...
來自於 2023-11-10 09:39:01
0
1
257
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！