文章主要介紹了HTMl 中marquee標籤實現無縫滾動跑馬燈效果,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑑價值，需要的朋友可以參考下
<marquee>標籤，它是成對出現的標籤，首標籤<marquee>和尾標籤</marquee>之間的內容就是滾動內容。<marquee>標籤的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的。
今天在做微信端的大轉盤抽獎時，想把所有使用者的抽獎記錄做成無縫滾動的效果，無奈我的js功底太差，一時想不出實現的方法，便百度各種相似效果。但無意中發現了一個html標籤——<marquee></marquee>可以實現多種滾動效果，無需js控制。使用marquee標籤不僅可以滾動文字，也可以滾動圖片，表格等，而且使用起來方便快捷，真的為我節省了不少時間。
marquee標籤不是HTML3.2的一部分，並且只支援MSIE3以後核心，所以如果你使用非IE核心瀏覽器(如：Netscape)可能無法看到下面一些很有意思的效果，該標籤是個容器標籤。
一、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 onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的兩個事件</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>引數不少，但畢竟不能實現複雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會採用JavaScript來實現跑馬燈滾動效果。
到此這篇關於HTMl 中marquee標籤實現無縫滾動跑馬燈效果的文章就介紹到這了,更多相關marquee無縫滾動跑馬燈內容請搜尋指令碼之家以前的文章或繼續瀏覽下面的相關文章