marquee一行代碼實現滾動跑馬燈效果無需js

最近ytkah決定拓展一下業務,貼補一些家用,~(@^_^@)~,將以前做的網站建設案例展現出來,有這方面需求的朋友可以掃一下二維碼加我哈,或者推薦朋友給我,有獎勵噢!網站設計案例展示一般用幻燈片切換會比較高大上,但這需要用到js,第三方博客等網站不支持外嵌js,或者有些網友不知道怎麼用,有一種方法可以解決,用<marquee></marquee>標籤,可以實現多種滾動效果,無需js控制。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>

 

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

原文:https://yq.aliyun.com/articles/305529?spm=a2c4e.11155472.0.0.2eba5391Lt3XnR

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章