marquee標籤實現跑馬燈效果--無縫滾動

      今天在作微信端的大轉盤抽獎時，想把全部用戶的抽獎記錄作成無縫滾動的效果，無奈個人js功底太差，一時想不出實現的方法，便百度各類類似效果。但無心中發現了一個html標籤——<marquee></marquee>能夠實現多種滾動效果，無需js控制。使用marquee標籤不只能夠滾動文字，也能夠滾動圖片，表格等，並且使用起來方便快捷，真的爲我節省了很多時間。

         marquee標籤不是HTML3.2的一部分，而且只支持MSIE3之後內核，因此若是你使用非IE內核瀏覽器(如：Netscape)可能沒法看到下面一些頗有意思的效果，該標籤是個容器標籤。

         1、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>

          2、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來實現跑馬燈滾動效果。