當前位置:常識百科館>母嬰教育>外語學習>

實例教程:HTML中會移動的文字

外語學習 閱讀(2.59W)

我們在瀏覽頁面的時候,會看到在頁面上移動的文字,文字的移動方向有從左到右、從右到左、從上到下、從下到上等。下面,我們來看看如何使用HTML代碼編寫會移動的文字吧。

實例教程:HTML中會移動的文字

工具/材料

HTML

操作方法

語法代碼
(1)一般使用<marquee></marquee>來設定移動文字,比如我們編寫如下代碼:
(2)<marquee>會移動的文字</marquee>
預覽效果可以發現編寫在<marquee></marquee>標籤內的文字,會從右邊到左邊循環移動,如下圖所示:

實例教程:HTML中會移動的文字 第2張
實例教程:HTML中會移動的文字 第3張

文字移動速度
(1)使用scrollamount來設定文字的移動速度,比如我們編寫如下所示代碼:
<marquee scrollamount=16>快點,快點</marquee>
<marquee scrollamount=12>等等我</marquee>
(2)預覽效果
可以看到scrollamount的數值越大,移動的速度就會越快,如下圖所示:

實例教程:HTML中會移動的文字 第4張
實例教程:HTML中會移動的文字 第5張

設定文字移動的方向
(1)direction在英文上是方向的意思,同樣使用direction來設定文字的移動方向,方向可以設定爲左、右、上、下等等,編寫如下代碼:
<marquee direction=left>文字從右邊向左邊</marquee> <P>
<marquee direction=right>從左邊向右邊移</marquee>
(2)預覽效果
可以看到當direction=left時,文字從右邊向左邊,當direction=right時,文字從左邊向右邊,如下圖所示:

實例教程:HTML中會移動的文字 第6張
實例教程:HTML中會移動的文字 第7張

文字循環的次數
(1)一般來說文字是默認無限次循環的,下面,我們來看看如何指定文字的循環次數吧。使用loop來設定文字的循環次數,比如編寫代碼如下:
<marquee loop=3 >文字只會循環三次</marquee>
(2)預覽效果
可以在瀏覽器上看到,文字只會循環三次,如下圖所示:

實例教程:HTML中會移動的文字 第8張
實例教程:HTML中會移動的文字 第9張

文字對齊
在HTML中的文字對齊功能,使用align屬性來設定,屬性值可以爲top、Middle、button,比如我們編寫如下所示的代碼:

(2)預覽效果
然後在瀏覽器中預覽效果,可以看到文字向上對齊,如下圖所示:

實例教程:HTML中會移動的文字 第10張
實例教程:HTML中會移動的文字 第11張

移動面積
(1)設定會移動的文字範圍,比如文字在長爲多少,寬爲多少的區域內移動,比如我們編寫如下代碼:
<marquee height=40 width=50% bgcolor=pink>在區域內移動的文字</marquee>
(2)預覽效果
在瀏覽器中可以看到文字在高爲40,寬爲瀏覽器一半的區域內移動,且區域的顏色爲粉紅色,如下圖所示:

實例教程:HTML中會移動的文字 第12張

延時
(1)設定文字的執行速度,讓文字可以時而快,時而慢地做運動,編寫代碼如下所示:

(2)預覽效果
在瀏覽器中預覽效果,可以看到文字先做快速度,然後做慢速度,如下圖所示:

實例教程:HTML中會移動的文字 第13張
實例教程:HTML中會移動的文字 第14張