1. 程式人生 > ><marquee>使用的詳細說明

<marquee>使用的詳細說明

不用 ces TP ber 媒體 視覺 mov eal sibling

該標簽不是HTML3.2的一部分,並且只支持MSIE3以後內核,所以如果你使用非IE內核瀏覽器(如:Netscape)可能無法看到下面一些很有意思的效果
該標簽是個容器標簽
語法:

<marquee></marquee>


以下是一個最簡單的例子:


代碼如下:

<marquee><font size=+3 color=red>Hello,World</font></marquee>

下面這兩個事件經常用到:
onMouseOut="this.start()" :用來設置鼠標移出該區域時繼續滾動
onMouseOver="this.stop()":用來設置鼠標移入該區域時停止滾動

代碼如下:

<marquee onMouseOut="this.start()"onMouseOver="this.stop()">

onMouseOut="this.start()" :用來設置鼠標移出該區域時繼續滾動

onMouseOver="this.stop()":用來設置鼠標移入該區域時停止滾動</marquee>

這是一個完整的例子:


代碼如下:

<marquee id="affiche" align="left"behavior="scroll" bgcolor="#FF0000"

direction="up" height="300" width="200"hspace="50" vspace="20" loop="-1" scrollamount="10"

scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
這是一個完整的例子
</marquee>


該標簽支持的屬性多達11個:


align
設定<marquee>標簽內容的對齊方式
absbottom:絕對底部對齊(與g、p等字母的最下端對齊)
absmiddle:絕對中央對齊
baseline:底線對齊
bottom:底部對齊(默認)
left:左對齊
middle:中間對齊
right:右對齊
texttop:頂線對齊
top:頂部對齊


代碼如下:

<marquee align="absbottom">align="absbottom":絕對底部對齊(與g、p等字母的最下端對齊)。 </marquee>

<marquee align="absmiddle">align="absmiddle": 絕對中央對齊。 </marquee>
<marquee align="baseline">align="baseline": 底線對齊。 </marquee>
<marquee align="bottom">align="bottom": 底部對齊(默認)。 </marquee>
<marquee align="left">align="left": 左對齊。 </marquee>
<marquee align="middle">align="middle": 中間對齊。 </marquee>
<marquee align="right">align="right": 右對齊。 </marquee>
<marquee align="texttop">align="texttop": 頂線對齊。 </marquee>
<marquee align="top">align="top": 頂部對齊。 </marquee>


behavior
設定滾動的方式:
alternate: 表示在兩端之間來回滾動。
scroll: 表示由一端滾動到另一端,會重復。
slide: 表示由一端滾動到另一端,不會重復。

代碼如下:

<marquee behavior="alternate">alternate:表示在兩端之間來回滾動。 </marquee>
<marquee behavior="scroll">scroll:表示由一端滾動到另一端,會重復。</marquee>
<marquee behavior="slide">slide: 表示由一端滾動到另一端,不會重復。</marquee>


bgcolor
設定活動字幕的背景顏色,背景顏色可用RGB、16進制值的格式或顏色名稱來設定。

代碼如下:

<marquee bgcolor="#006699">設定活動字幕的背景顏色 bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">設定活動字幕的背景顏色 bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">設定活動字幕的背景顏色bgcolor="red"</marquee>


direction
設定活動字幕的滾動方向

代碼如下:

<marquee direction="down">設定活動字幕的滾動方向direction="down":向下</marquee>
<marquee direction="left">設定活動字幕的滾動方向direction="left":向左</marquee>
<marquee direction="right">設定活動字幕的滾動方向direction="right":向右</marquee>
<marquee direction="up">設定活動字幕的滾動方向direction="up":向上</marquee>


height
設定活動字幕的高度

代碼如下:
<marquee height="500" direction="down"bgcolor="#CCCCCC">設定活動字幕的高度height="500"</marquee>


width
設定活動字幕的寬度

代碼如下:
<marquee width="500" bgcolor="#CCCCCC">設定活動字幕的寬度width="500"</marquee>

hspace
設定活動字幕裏所在的位置距離父容器水平邊框的距離
This controls the horizontal(水平)space around thedisplay box.

代碼如下:

<table width="500"border="1" align="center" cellpadding="0"cellspacing="0">
<tr>
<td><marquee hspace="100"bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</table>


vspace
設定活動字幕裏所在的位置距離父容器垂直邊框的距離
This controls the vertical(垂直) space around the displaybox.

代碼如下:
<marquee vspace="100"bgcolor="#CCCCCC">hspace="100"</marquee>

loop
設定滾動的次數,當loop=-1表示一直滾動下去,默認為-1

代碼如下:

<marquee loop="-1"bgcolor="#CCCCCC">我會不停地走。</marquee>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">我只走兩次哦</marquee>


scrollamount
設定活動字幕的滾動速度,單位pixels

代碼如下:

<marquee scrollamount="10">scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20"</marquee>
<marquee scrollamount="30" >scrollamount="30"</marquee>


scrolldelay
設定活動字幕滾動兩次之間的延遲時間,單位millisecond(毫秒)
值大了會有一步一停頓的效果

代碼如下:

<marquee scrolldelay="10">scrolldelay="10" </marquee>
<marquee scrolldelay="100" >scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000"</marquee>

align: 對齊方式 LEFT,CENTER,RIGHT,TOP,BOTTOM (不用多說了)
behavior: 用於設定滾動的方式,主要由三種方式:
behavior="scroll": 表示由一端滾動到另一端;
behavior="slide": 表示由一端快速滑動到另一端,且不再重復;
behavior="alternate" : 默認值——表示在兩端之間來回滾動。
direction: left(默認值) 左; right 右;up 上;down 下;
bgcolor: 背景顏色
height: 高度
weight: 寬度
Hspace/vspace: 分別用於設定滾動字幕的左右邊框和上下邊框的寬度。作用大概和css中的margin差不多
scrollamount: 用於設定每個連續滾動文本後面的間隔,該間隔用像素表示,

以上是官方說法,其實就是滾動的速度,值不能太大,要不從視覺角度來說,是沒反應的.值越大速度越快,反之越慢。

scrolldelay: 延遲時間
loop: 這個屬性大家也很熟悉,循環次數;loop=-1的時候一直重復循環(默認值)

Marquee標記用於在可用瀏覽區域中滾動文本。

屬性: 
 ALIGN:用於按設定的值對齊滾動的文本。ALIGN可以設定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此屬性不是必須使用的。 
 例: 
  [MARQUEE ALIGN="TOP"]這段滾動文字設定為上對齊 [/MARQUEE] 
   
   
  BEHAVIOR:可以在頁面上一旦出現文本時讓瀏覽器按照設定的方法來處理文本。

如果設定的方法是SLIDE,那麽文本就移動到文檔上,並停留在 頁邊距上。

如果設定為AlterNATE,則文本從一邊移動到另一邊。

如果設定為SCROLL,文本將在頁面上反復滾動。本屬性不是必須使用的。可以設定 的值有:SILIDE,AlterNATE,SCROLL。 
  例: 
   [MARQUEE BEHAVIOR="AlterNATE"]文字從一邊移動到另一邊 [/MARQUEE] 
   
   
  BGCOLOR:用於設定字幕的背景顏色。背景顏色可用RGB、16進制值的格式或顏色名稱來設定。 
   例: 
    [MARQUEE BGCOLOR="RED"]用顏色名稱設定滾動文字背景顏色為紅色 [/MARQUEE] 
   [MARQUEE BGCOLOR="#FF0000"]用16進制值設定滾動文字背景顏色為紅色 [/MARQUEE] 
   [MARQUEE BGCOLOR=RGB(100%'0%'0%)] 用RGB設定滾動文字背景顏色為紅色 [/MARQUEE]  
      
  DIRECTION:用於設定文本滾動的方向,可以設定的值有:LEFT,RIGHT。此屬性不是必須使用的。 
   例: 
     [MARQUEE DIRECTION="LEFT"]文字向左邊滾動 [/MARQUEE] 
     [MARQUEE DIRECTION="RIGHT"]文字向右邊滾動 [/MARQUEE] 
   
HEIGHT:用於設定滾動字幕的高度,高度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。 
    例: 
    [MARQUEE HEIGHT="10%"]滾動字幕的高度是可視頁面的10%[ /MARQUEE] 
    [MARQUEE HEIGHT="12"]滾動字幕的高度是12像素 [/MARQUEE] 
      
    WIDTH:用於設定字幕的寬度,寬度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。 
    例: 
    [MARQUEE WIDTH="90%"]滾動字幕的寬度是可視頁面的90% [/MARQUEE] 
    [MARQUEE WIDTH="200"]滾動字幕的寬度是200像素 [/MARQUEE ]
      
    HSPACE:用於設定滾動字幕左右的空白空間,空白空間用像素表示。此屬性不是必須使用的。 
    例: 
    [MARQUEE HSPACE="15"]滾動字幕左右空白空間為15個像素 [/MARQUEE] 
     
    VSPACE:用於設定滾動字幕上下的空白空間,空白空間用像素表示。此屬性不是必須使用的。 
    例: 
    [MARQUEE VSPACE="2"]滾動字幕上下的空白空間為2個像素 [/MARQUEE] 
     
    LOOP:用於設定滾動字幕的滾動次數。當LOOP的值為"INFINITE"或是"-1"時,則文字會無限制地滾動。此屬性不是必須使用的。 
    例: 
    [MARQUEE LOOP="-1"]文字滾動無數次 [/MARQUEE] 
    [MARQUEE LOOP="5"]文字滾動5次 [/MARQUEE] 
   
    SCROLLAMOUNT:用於設定每個連續滾動文本後面的間隔,該間隔用像素表示。此屬性不是必須使用的。 
    例: 
    [MARQUEE SCROLLAMOUNT="10"]此文本後面的間隔為10個像素 [/MARQUEE] 
      
    SCROLLDELAY:用於設定兩次滾動操作之間的間隔時間,該時間以毫秒為單位。此屬性不是必須使用的。 
    例: 
    [MARQUEE SCROLLDELAY="5"]此文本兩次滾動之間的間隔時間為5毫秒 [/MARQUEE]

ONMOUSEOUT=this.start() :用來設置鼠標移出該區域時繼續滾動
ONMOUSEOVER=this.stop():用來設置鼠標移入該區域時停止滾動

Marquee 也可以做飄浮廣告效果:
<marquee behavior="alternate"height="300" direction="up" scrollamount="3"scrolldelay="30" width="300" bgcolor="#3399FF">
<marquee behavior="alternate"height="50" direction="left" scrollamount="3"scrolldelay="30" width="100%">
<font style="font-size: 35px">Ouyang</font>
</marquee>

<marquee> ... </marquee>
移動屬性的設置 ,這種移動不僅僅局限於文字,也可以應用於圖片,表格等等

鼠標屬性

onMouseOut=this.start() ........鼠標移出狀態滾動

onMouseOver=this.stop() .........鼠標經過時停止滾動

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>從右向左移!</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞著走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>來回走</marquee>

循環
<loop=#> #=次數;若未指定則循環不止(infinite) <marqueeloop=3 width=50% behavior=scroll>只走 3 趟</marquee>


<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3趟!</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快喲!</marquee>

延時
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

外觀(Layout)設置

對齊方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我會移動耶!</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 進制數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marqueebgcolor=aaaaee>顏色!</marquee>

面積
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面積!</marquee>

空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面積!</marquee>

marquee屬性

ACCESSKEY accessKey 設置或獲取對象的快捷鍵。


ATOMICSELECTION 指定元素及其內容是否可以一不可見單位統一選擇。


BEGIN begin 設置或獲取時間線在該元素上播放前的延遲時間。


BEHAVIOR behavior 設置或獲取文本如何在字幕中滾動。
BGCOLOR bgColor 不推薦。設置或獲取對象後面的背景顏色。
canHaveChildren 獲取表明對象是否可以包含子對象的值。
canHaveHTML 獲取表明對象是否可以包含豐富的 HTML 標簽的值。
CLASS className 設置或獲取對象的類。
clientHeight 獲取對象的高度,不計算任何邊距、邊框、滾動條或可能應用到該對象的補白。
clientLeft 獲取 offsetLeft 屬性和客戶區域的實際左邊之間的距離。
clientTop 獲取 offsetTop 屬性和客戶區域的實際頂端之間的距離。
clientWidth 獲取對象的寬度,不計算任何邊距、邊框、滾動條或可能應用到該對象的補白。
CONTENTEDITABLE contentEditable 設置或獲取表明用戶是否可編輯對象內容的字符串。
DATAFLD dataFld 設置或獲取由 dataSrc 屬性指定的綁定到指定對象的給定數據源的字段。
DATAFORMATAS dataFormatAs 設置或獲取如何渲染提供給對象的數據。
DATASRC dataSrc 設置或獲取用於數據綁定的數據源。
DIR dir 設置或獲取對象的閱讀順序。
DIRECTION direction 設置或獲取文本滾動的方向。
disabled 獲取表明用戶是否可與該對象交互的值。
DISABLED disabled 設置或獲取控件的狀態。
END end 設置或獲取表明元素結束時間的值,或者元素設置為重復的簡單持續終止時間。
firstChild 獲取對象的 childNodes 集合的第一個子對象的引用。
hasMedia 獲取一個表明元素是否為 HTML+TIME 媒體元素的 Boolean 值。
HEIGHT height 設置或獲取對象的高度。
HIDEFOCUS hideFocus 設置或獲取表明對象是否顯式標明焦點的值。
HSPACE hspace 設置或獲取對象的水平邊距。
ID id 獲取標識對象的字符串。
innerHTML 設置或獲取位於對象起始和結束標簽內的 HTML。
innerText 設置或獲取位於對象起始和結束標簽內的文本。
isContentEditable 獲取表明用戶是否可編輯對象內容的值。
isDisabled 獲取表明用戶是否可與該對象交互的值。
isMultiLine 獲取表明對象的內容是包含一行還是多行的值。
isTextEdit 獲取是否可使用該對象創建一個 TextRange 對象。
LANG lang 設置或獲取要使用的語言。
LANGUAGE language 設置或獲取當前腳本編寫用的語言。
lastChild 獲取該對象 childNodes 集合中最後一個子對象的引用。
LOOP loop 設置或獲取字幕播放的次數。
nextSibling 獲取對此對象的下一個兄弟對象的引用。
nodeName 獲取特定結點類型的名稱。
nodeType 獲取所需結點的類型。
nodeValue 設置或獲取結點的值。
offsetHeight 獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度。
offsetLeft 獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置。
offsetParent 獲取定義對象 offsetTop 和offsetLeft 屬性的容器對象的引用。
offsetTop 獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置。
offsetWidth 獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度。
onOffBehavior 獲取表明指定的 Microsoft? DirectAnimation? 行為是否正在運行的對象。
outerHTML 設置或獲取對象及其內容的 HTML 形式。
outerText 設置或獲取對象的文本。
ownerDocument 設置或獲取結點關聯的 document 對象。
parentElement 獲取對象層次中的父對象。
parentNode 獲取文檔層次中的父對象。
parentTextEdit 獲取文檔層次中可用於創建包含原始對象的 TextRange 的容器對象。
previousSibling 獲取對此對象的上一個兄弟對象的引用。
readyState 獲取對象的當前狀態。
recordNumber 獲取數據集中生成對象的原始記錄。
scopeName 獲取為該元素定義的命名空間。
SCROLLAMOUNT scrollAmount 設置或獲取介於每個字幕繪制序列之間的文本滾動像素數。
SCROLLDELAY scrollDelay 設置或獲取字幕滾動的速度。
scrollHeight 獲取對象的滾動高度。
scrollLeft 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離。
scrollTop 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離。
sourceIndex 獲取對象在源序中的依次位置,即對象出現在 document 的 all 集合中的順序。
STYLE 為該設置元素設置內嵌樣式。
SYNCMASTER syncMaster 設置或獲取時間容器是否必須在此元素上同步回放。
SYSTEMBITRATE 獲取系統中大約可用帶寬的 bps。
SYSTEMCAPTION 表明是否要顯示文本來代替演示的的音頻部分。
SYSTEMLANGUAGE 表明是否在用戶計算機上的選項設置中選中了給定語言。
SYSTEMOVERDUBORSUBTITLE 指定針對那些正在觀看演示但對被播放的音頻所使用的語言並不熟悉的用戶來說是否要渲染配音或字幕。
TABINDEX tabIndex 設置或獲取定義對象的 Tab 順序的索引。
tagName 獲取對象的標簽名稱。
tagUrn 設置或獲取在命名空間聲明中指定的統一資源名稱(URN)。
TIMECONTAINER timeContainer 設置或獲取與元素關聯的時間線類型。
TITLE title 設置或獲取對象的咨詢信息(工具提示)。
TRUESPEED trueSpeed 設置或獲取字幕的位置是否使用 scrollDelay 和 scrollAmount 屬性計算,已過的實際時間來自於時鐘計時。
uniqueID 獲取為對象自動生成的唯一標識符。
UNSELECTABLE 指定該元素不可被選中。
VSPACE vspace 設置或獲取對象的垂直邊距。
WIDTH width 設置或獲取對象的寬度。

<marquee>使用的詳細說明