首頁 > web前端 > html教學 > HTML如何實現文字的滾動效果

HTML如何實現文字的滾動效果

青灯夜游
發布: 2018-11-29 09:30:58
原創
34518 人瀏覽過

在HTML中,可以透過HTML的標籤來實現文字的滾動效果,透過設定標籤裡的不同屬性來實現不同的文字的滾動效果。

HTML如何實現文字的滾動效果

在HTML中實作文字的捲動效果其實很簡單,這篇文章就給大家介紹HTML 標籤實作文字的捲動效果的方法,讓大家了解標籤設定不同屬性實現的不同文字捲動效果。

HTML  Marquee標籤是一個非標準的HTML元素,可以用於水平或垂直捲動圖像或文字。

簡單來說,就是它會自動向上,向下,向左或向右的滾動圖像或文字。

下面我們來看看實作簡單文字捲動的範例:

<marquee> 这是html marquee标签的一个简单滚动例子</marquee >
登入後複製

效果圖:

HTML如何實現文字的滾動效果

是不是很簡單,只要把想要捲動的文字放的標籤裡面就可以了。

接下來我們了解一下HTML 標籤的屬性,看看HTML 標籤可以怎麼設定圖片或文字的滾動。

Marquee的元素裡包含了幾個用來控制和調整marquee滾動字幕外觀和滾動方式的屬性。

HTML如何實現文字的滾動效果

Marquee標籤設定滾動字幕的範例:

我們來使用這些屬性設定

1、簡單捲動字幕範例:設定寬度,捲動方式,背景顏色

<marquee width = "100%" behavior = "scroll" bgcolor = "pink" >     
	这是滚动字幕的一个例子......  
</marquee>
登入後複製

效果圖:

HTML如何實現文字的滾動效果

2、複雜一點的滾動字幕

需要滾動的所有內容將在滾動框的整個長度上滑動,但在結尾處停止以永久顯示內容。

<marquee width = "100%" behavior = "slide" bgcolor = "pink" >     
   这是一个复杂的滚动字幕例子......  
</marquee >
登入後複製

效果圖:

HTML如何實現文字的滾動效果

3、設定HTML 文字捲動的方向

透過設定marquee標籤的屬性,我們可以變更捲動文本的方向。方向可以是左,右,上和下。

我們來看一個右邊的選框滾動的例子。

<marquee width = "100%">     
   文本默认从右向左滚动......  
</marquee >  
<marquee width = "100%" bgcolor = "pink"  direction = "right" >     
   设置文本从左向右滚动......  
</marquee >
登入後複製

效果圖:

HTML如何實現文字的滾動效果

4、設定字幕左右循環捲動

使得文字從右向左捲動後,在從左向右滾動。

<marquee width = "100%" behavior = "alternate" bgcolor = "pink" >     
   文本从右向左滚动后,在从左向右滚动的例子......  
</marquee>
登入後複製

效果圖:

HTML如何實現文字的滾動效果

5、html 巢狀捲動字幕框(標籤)

<marquee width = "400px" height ="200px" behavior = "alternate" style ="border:2px solid red" >      
	<marquee behavior = "alternate" >   
	      嵌套滚动字幕框...  
	</marquee >  
</marquee>
登入後複製

效果圖:

HTML如何實現文字的滾動效果

HTML 標籤的缺點:

1)Marquee設定的滾動字幕可能會分散注意力,因為人眼會不斷地被吸引到運動和字幕上。

2)Marquee設定的文字可以移動,因此根據滾動速度點擊靜態文字更加困難。

3)Marquee標籤元素是一個非標準的HTML元素。

4)Marquee設定的滾動字幕不必要地吸引使用者的注意,使文字更難閱讀。

瀏覽器支援度:

HTML如何實現文字的滾動效果

#總結:以上就是本篇文章的全部內容,希望對大家的學習有所幫助。

以上是HTML如何實現文字的滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板