使用marquee标签实现文字滚动
代碼:
效果:
有關marquee的詳細使用請參考:
以下內容整理自網絡。
一、marquee標簽的幾個重要屬性:
1.direction:滾動方向(包括4個值:up、down、left、right)
說明:up:從下向上滾動;down:從上向下滾動;left:從右向左滾動;right:從左向右滾動。
語法:<marquee direction="滾動方向">...</marquee>
2.behavior:滾動方式(包括3個值:scroll、slide、alternate)
說明:scroll:循環滾動,默認效果;slide:只滾動一次就停止;alternate:來回交替進行滾動。
語法:<marquee behavior="滾動方式">...</marquee>
3.scrollamount:滾動速度(滾動速度是設置每次滾動時移動的長度,以像素為單位)
語法:<marquee scrollamount="5">...</marquee>
4.scrolldelay:設定滾動兩次之間的延遲時間,值大了會有一步一停頓的效果(設置滾動的時間間隔,單位是毫秒)
語法:<marquee scrolldelay="100">...</marquee>
5.loop:設定滾動循環的次數(默認值是-1,滾動會不斷的循環下去)
語法:<marquee loop="2">...</marquee>?????????????????????? ?
?? ??? ??? ? <marquee loop="-1" bgcolor="#CCCCCC">我會不停地走。</marquee>
?? ??? ??? ? <marquee loop="2" bgcolor="#CCCCCC">我只走兩次哦</marquee>
6.width、height:設定滾動字幕的寬度、高度
語法:<marquee width="500" height="200">...</marquee>
7.bgcolor:設定滾動字幕的背景顏色(可以是顏色值,也可以是rgb()或rgba()函數)
語法:<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>
8.hspace、vspace:空白空間(相當于設置margin值)
?說明:hspace:設定活動字幕里所在的位置距離父容器水平邊框的距離,如hspace=“10”,即等同于:margin:0 10px;
?? ??? ??? ? vspace:設定活動字幕里所在的位置距離父容器垂直邊框的距離,如vspace=“10”,即等同于:margin:10px 0;
?語法:<marquee hspace="10"? vspace="10">...</marquee>(等同于:margin:10px;)
9.align:設定滾動字幕內容的對齊方式(包括9個值:absbottom、absmiddle、baseline、bottom、left、middle、right、?????????????????????????????????????? texttop、top)
? 說明:absbottom:絕對底部對齊(與g、p等字母的最下端對齊)
?? ??? ??? ?? absmiddle:絕對中央對齊
?? ??? ??? ?? baseline:底線對齊
?? ??? ??? ?? bottom:底部對齊(默認)
?? ??? ??? ?? left:左對齊
?? ??? ??? ?? middle:中間對齊
?? ??? ??? ?? right:右對齊
?? ??? ??? ?? texttop:頂線對齊
?? ??? ??? ?? top:頂部對齊
?? ? 語法:<marquee align="對齊方式">...</marquee>
10.face:設定滾動字幕的文字字體
?? ?語法:<marquee font="楷體_GB2312"></marquee>
11.color:設定滾動字幕的文字顏色
?? ?語法:<marquee color="#333"></marquee>
12.size:設定滾動字幕的文字字號
?? ?語法:<marquee size="3"></marquee>
13.STRONG:設定滾動字幕的文字加粗
?? ?語法:<marquee STRONG></marquee>
二、marquee常用到的兩個事件:
?? onMouseOut="this.start()" 用來設置鼠標移出該區域時繼續滾動
?? onMouseOver="this.stop()" 用來設置鼠標移入該區域時停止滾動
總結
以上是生活随笔為你收集整理的使用marquee标签实现文字滚动的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 江苏科技报:《电子名片悄然流行,纸质名片
- 下一篇: iOS多线程加锁