html marquee標籤如何實現上下滾動,marquee標籤的滾動速度設置

寻∝梦
發布: 2018-09-04 11:56:50
原創
10726 人瀏覽過

本篇文章主要的向大家介紹了關於html marquee標籤的兩種用法。一種是讓marquee標籤中的文字實現上下滾動的效果,還有一種是讓marquee標籤中的文字滾動的速度更快或更慢都行。大家還能把兩個合起來一起使用。現在讓我們一起來看這篇文章吧

首先讓我們認識這個html marquee標籤:

這個marquee標籤以前專門寫過關於它的一些用法和屬性,大家可以點選html中捲軸的程式碼是什麼?如何設定html捲軸? 看看。

標籤,它是成對出現的標籤,首標籤和尾標籤之間的內容就是滾動內容。 標籤的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它們都是可選的。

現在看看marquee標籤如何實現上下滾動的:

html marquee標籤的behavior屬性:

behavior屬性的參數值為alternate、scroll、slide中的一個,分別表示文字來回滾動、單方向循環滾動、只滾動一次,需要注意的是:如果在標籤中同時出現了direction和behavior屬性,那麼scroll和slide的滾動方向將依照direction屬性中參數的設定。

<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> 
<marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
登入後複製

bgcolor屬性文字滾動範圍的背景顏色,參數值是16進位(形式:#AABBCC或#AA5566等)或預先定義的顏色名稱(如red、yellow、blue等)。如下:我的背景色是紅色的

#還有html marquee標籤的direction屬性:

文字滾動的方向,屬性的參數值有down、left、right、up共四個單一可選值,分別代表滾動方向向下、向左、向右、向上。如下圖:

<marquee direction="right">我向右滚动</marquee>
<marquee direction="left">我向左滚动</marquee>
<marquee direction="down">我向下滚动</marquee>
<marquee direction="up">我向上滚动</marquee>
登入後複製

主要是後面兩個,就是本文首要介紹的上下滾動,設定了這個就能讓裡面的文字進行上下滾動效果。

現在說說看marquee標籤的滾動速度:

這個html marquee標籤的滾動速度是哪個屬性呢?有沒有人能猜到。 。 。

好吧,還是我自己說吧,是scrollamount和scrolldelay屬性:

這兩個屬性決定文字滾動的速度(scrollamount)和延時(scrolldelay ),參數值都是正整數。如下:

<marquee scrollamount="100">我速度很快.</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
登入後複製

可以設定具體的數字,你想多快就多快,你想多慢就多慢,是不是很有趣。但因為都是動圖,都是不好截圖的,給大家推薦個可以直接複製就能出效果的網址:http://www.php.cn/code/26516.html,只要把上面的程式碼複製進去就能顯示出效果了。大家可以試試看。

好了,這篇關於html marquee標籤的兩種用法都在這裡了。有問題的可以在下方提問。

【小編推薦】

html中捲軸的程式碼是什麼?如何設定html捲軸?

html5 progress標籤怎麼用? progress標籤的屬性介紹

#

以上是html marquee標籤如何實現上下滾動,marquee標籤的滾動速度設置的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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