html 字幕飘动效果,html 滚动字幕 制作滚动字幕效果 参数
制作滾動字幕效果:marquee標簽 如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scrollAmount=4> </marquee>
參數說明:
direction滾動方向:
up向上滾動,down向下滾動,left向左滾動,right向右滾動
behavior滾動方式:
scroll繞來繞去,slide滾動一次就停下來,alternate來回滾動
scrollAmount滾動速度:數值越大滾動越快
scrollDelay滾動延遲:數值越大延遲時間越長
loop循環次數:循環幾次
bgcolor背景顏色
height高度
width寬度
οnmοuseοut=start() οnmοuseοver=stop()鼠標懸停停止,離開繼續滾動
移動方式可以系屬性果度改...下上左右都得...
滾動字幕的使用可以增加網頁的動感,讓網頁顯得更有生氣。當然用javascript可以實現滾動字幕效果;使用Dreamweaver的圖層再用其時間軸功能可以做出非常漂亮的滾動看板。但相對而言,用HTML的滾動字幕標記所需的代碼最少,雖然效果不是最好,但確實能夠以較少的下載時間換來較好的效果。該標記語法格式如下:
aligh=left|center|right|top|bottom
bgcolor=
direction=left|right|up|down
behavior=
height=
hspace=
scrollamount=
Scrolldelay=
width=
VSpace=
loop= >
滾擇不同的參數,滾動字幕會有不同的顯示方式。下面解釋一下各參數的含義:
align:是設定滾動字幕的位置,除左、中、右三種位置外,還有靠上(align=top)和靠下(align=bottom)兩種位置。
Bgcolor:用于設定滾動字幕的背景顏色。
Direction:用于設定滾動字幕的滾動方向。
Behavior:用于設定滾動的方式,
主要由三種方式:behavior="scroll"表示由一端滾動到另一端;behavior="slide":表示由一端快速滑動到另一端,且不再重復;behavior="alternate"表示在兩端之間來回滾動。
Height:用于設定滾動字幕的高度
Width:則設定滾動字幕的寬度。
Hspace和vspace:分別用于設定滾動字幕的左右邊框和上下邊框的寬度。
Scrollamount:用于設定滾動字幕的滾動距離。
scrolldelay:用于設定滾動兩次之間的延遲時間。
Loop:用于設定滾動的次數,當loop=-1表示一直滾動下去,直到頁面更新。
標記的默認情況是向左滾動無限次,字幕高度是文本高度,滾動范圍:水平滾動的寬度是當前位置的寬度;垂直滾動的高度是當前位置的高度。
應用技巧
1、垂直滾動
只要加上diriction="up"就行了,如
向上滾動
2、多行文本的滾動字幕
由于標記只能作用于一段文本,因此多行滾動字幕,分行時只能用
標記,不能用
標記.
滾動字幕內容第一行
滾動字幕內容第二行
滾動字幕內容第三行
3、在字幕內容中加入圖象
雖是一個滾動字幕標記,但它允許在其中加入圖象:
這是加入圖象的滾動字幕
標記的參數較多,在應用中要把握一個原則,能用默認值就不要再設置參數值,用什么參數就設置該參數的值,其它參數就不要再設置,以把代碼控制在最少的范圍內。
用MARQUEE標簽可以做文字或圖片的簡單的左右或上下移動。并可以響應鼠標、加入鏈接。不需要復雜的JS,只要一句簡單的MARQUEE標簽。
下面跟你介紹下標簽中的參數設置。點這里看示例文件。(MARQUEE標簽只有IE支持,在NC的瀏覽器上無效)
先看下代碼:
這是放文字或需要移動的圖片(光標放在這里時用INSERT命令就可以插入圖片)
下面來解釋下各參數意思:
direction=left/right/up/down表示移動的方向 可以是 上下左右
BEHAVIOR 屬性:改變 marquee 標簽內容移動的幾種方式。alternate滾動的內容會來回滾動。scroll默認的從右到左的移動。slide滾動結束后會停留在最后的位置上。
scrollAmount:定每顯示一個marquee片段間的間距 如 scrollAmount =100
scrollDelay 指定每顯示一個marquee片段間的時間差 如 scrollDelay = 1
LOOP:指定循環顯示的次數,如 loop=3 還可以1, 默認的值是 無限循環
BGCOLOR: 背景的顏色 如 #990000 black 等都是有效的值
width: 移動范圍的長度 如 width=300 也可以是百分數。
height: 移動范圍的高度 如 height=50
Align #=top, middle, bottom 表示居中位置
Margins 表示MARQUEE塊在上下和左右方向留的空距。
title: 鼠標移動marquee上時出現的說明 好象或圖片的ALT那種。
style: 你可加入風格的樣式,如字體的顏色等 STYLE="{color: #ffffff; font-family:Arial;font-size:8pt}"
stop的SCRIPT:可以令到滾動停止 試試在中加入 onmouserover=this.stop
start 可以令到滾動重新開始 試試在中加入 onmouserover=this.start
還可以有onbounce 觸發當來回一次時觸發的事件等等。
也可以用以下的javascript方式控制MARQUEE的鼠標響應:其中iescroller是MARQUEE的ID。
iescroller.οnmοuseοver=new Function("iescroller.scrollAmount=0");
iescroller.οnmοuseοut=new Function("iescroller.scrollAmount=2");
總結
以上是生活随笔為你收集整理的html 字幕飘动效果,html 滚动字幕 制作滚动字幕效果 参数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 王成录华为鸿蒙系统,华为手机销量仍在增长
- 下一篇: html节点上下移动,关于前端:数组元素