<marquee>標(biāo)簽，它是成對(duì)出現(xiàn)的標(biāo)簽，首標(biāo)簽<marquee>和尾標(biāo)簽</marquee>之間的內(nèi)容就是滾動(dòng)內(nèi)容。<marquee>標(biāo)簽的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的。
今天在做微信端的大轉(zhuǎn)盤抽獎(jiǎng)時(shí)，想把所有用戶的抽獎(jiǎng)記錄做成無縫滾動(dòng)的效果，無奈我的js功底太差，一時(shí)想不出實(shí)現(xiàn)的方法，便百度各種相似效果。但無意中發(fā)現(xiàn)了一個(gè)html標(biāo)簽——<marquee></marquee>可以實(shí)現(xiàn)多種滾動(dòng)效果，無需js控制。使用marquee標(biāo)簽不僅可以滾動(dòng)文字，也可以滾動(dòng)圖片，表格等，而且使用起來方便快捷，真的為我節(jié)省了不少時(shí)間。
marquee標(biāo)簽不是HTML3.2的一部分，并且只支持MSIE3以后內(nèi)核，所以如果你使用非IE內(nèi)核瀏覽器(如：Netscape)可能無法看到下面一些很有意思的效果，該標(biāo)簽是個(gè)容器標(biāo)簽。
一、marquee標(biāo)簽的幾個(gè)重要屬性：
1.direction：滾動(dòng)方向(包括4個(gè)值：up、down、left、right)
說明：up：從下向上滾動(dòng)；down：從上向下滾動(dòng)；left：從右向左滾動(dòng)；right：從左向右滾動(dòng)。
語(yǔ)法：<marquee direction="滾動(dòng)方向">...</marquee>
2.behavior：滾動(dòng)方式(包括3個(gè)值：scroll、slide、alternate)
說明：scroll：循環(huán)滾動(dòng)，默認(rèn)效果；slide：只滾動(dòng)一次就停止；alternate：來回交替進(jìn)行滾動(dòng)。
語(yǔ)法：<marquee behavior="滾動(dòng)方式">...</marquee>
3.scrollamount：滾動(dòng)速度(滾動(dòng)速度是設(shè)置每次滾動(dòng)時(shí)移動(dòng)的長(zhǎng)度，以像素為單位)
語(yǔ)法：<marquee scrollamount="5">...</marquee>
4.scrolldelay:設(shè)定滾動(dòng)兩次之間的延遲時(shí)間，值大了會(huì)有一步一停頓的效果(設(shè)置滾動(dòng)的時(shí)間間隔，單位是毫秒)
語(yǔ)法：<marquee scrolldelay="100">...</marquee>
5.loop：設(shè)定滾動(dòng)循環(huán)的次數(shù)(默認(rèn)值是-1，滾動(dòng)會(huì)不斷的循環(huán)下去)
語(yǔ)法：<marquee loop="2">...</marquee>
<marquee loop="-1" bgcolor="#CCCCCC">我會(huì)不停地走。</marquee>
<marquee loop="2" bgcolor="#CCCCCC">我只走兩次哦</marquee>
6.width、height：設(shè)定滾動(dòng)字幕的寬度、高度
語(yǔ)法：<marquee width="500" height="200">...</marquee>
7.bgcolor：設(shè)定滾動(dòng)字幕的背景顏色(可以是顏色值，也可以是rgb()或rgba()函數(shù))
語(yǔ)法：<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>
8.hspace、vspace：空白空間(相當(dāng)于設(shè)置margin值)
說明：hspace：設(shè)定活動(dòng)字幕里所在的位置距離父容器水平邊框的距離，如hspace=“10”，即等同于：margin：0 10px；
vspace：設(shè)定活動(dòng)字幕里所在的位置距離父容器垂直邊框的距離，如vspace=“10”，即等同于：margin：10px 0；
語(yǔ)法：<marquee hspace="10" vspace="10">...</marquee>(等同于：margin：10px；)
9.align：設(shè)定滾動(dòng)字幕內(nèi)容的對(duì)齊方式(包括9個(gè)值：absbottom、absmiddle、baseline、bottom、left、middle、right、 texttop、top)
說明：absbottom：絕對(duì)底部對(duì)齊（與g、p等字母的最下端對(duì)齊）
absmiddle：絕對(duì)中央對(duì)齊
baseline：底線對(duì)齊
bottom：底部對(duì)齊（默認(rèn)）
left：左對(duì)齊
middle：中間對(duì)齊
right：右對(duì)齊
texttop：頂線對(duì)齊
top：頂部對(duì)齊
語(yǔ)法：<marquee align="對(duì)齊方式">...</marquee>
10.face：設(shè)定滾動(dòng)字幕的文字字體
語(yǔ)法：<marquee font="楷體_GB2312"></marquee>
11.color：設(shè)定滾動(dòng)字幕的文字顏色
語(yǔ)法：<marquee color="#333"></marquee>
12.size：設(shè)定滾動(dòng)字幕的文字字號(hào)
語(yǔ)法：<marquee size="3"></marquee>
13.STRONG：設(shè)定滾動(dòng)字幕的文字加粗
語(yǔ)法：<marquee STRONG></marquee>
二、marquee常用到的兩個(gè)事件：
onMouseOut="this.start()" 用來設(shè)置鼠標(biāo)移出該區(qū)域時(shí)繼續(xù)滾動(dòng)
onMouseOver="this.stop()" 用來設(shè)置鼠標(biāo)移入該區(qū)域時(shí)停止?jié)L動(dòng)
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的兩個(gè)事件</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>參數(shù)不少，但畢竟不能實(shí)現(xiàn)復(fù)雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會(huì)采用JavaScript來實(shí)現(xiàn)跑馬燈滾動(dòng)效果。
到此這篇關(guān)于HTMl 中marquee標(biāo)簽實(shí)現(xiàn)無縫滾動(dòng)跑馬燈效果的文章就介紹到這了,更多相關(guān)marquee無縫滾動(dòng)跑馬燈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
