H5製作跑馬燈

木木_fth發表於2019-01-03
H5

第一種方式：marquee標籤

marquee標籤其實就是一個用於製作跑馬燈的標籤

格式

<marquee>內容</marquee>

屬性

marquee標籤的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的

  • width和height屬性

width和height屬性的作用決定滾動文字在頁面中的矩形範圍大小寬高，屬性值可以為數字或百分比

<marquee width="300" height="100%">`跑馬燈內容</marquee>
複製程式碼

hspace和vspace屬性

這兩個屬性決定滾動矩形區域跟周圍空白區域的距離

<marquee width="300" height="30" vspace="10" hspace="10">跑馬燈內容</marquee>
複製程式碼
  • align

設定marquee標籤內容的對齊方式

屬性值 描述
absbottom 絕對底部對齊
absmiddle 絕對中央對齊
baseline 底線對齊
bottom 底部對齊（預設）
left 左對齊
middle 中間對齊
right 右對齊
texttop 頂線對齊
top 頂部對齊 
<marquee align="absbottom">絕對底部對齊（與g、p等字母的最下端對齊）。</marquee>
<marquee align="absmiddle">絕對中央對齊。</marquee>
<marquee align="baseline">底線對齊。</marquee>
<marquee align="bottom">底部對齊（預設）。</marquee>
<marquee align="left">左對齊。</marquee>
<marquee align="middle">中間對齊。</marquee>
<marquee align="right">右對齊。</marquee>
<marquee align="texttop">頂線對齊。</marquee>
<marquee align="top">頂部對齊。</marquee>
複製程式碼
  • behavior

設定滾動的方式：

屬性值 意義
alternate 表示在兩端之間來回滾動。
scroll 表示由一端滾動到另一端，會重複。
slide 表示由一端滾動到另一端，不會重複。 
<marquee behavior="alternate">表示在兩端之間來回滾動。</marquee>
<marquee behavior="scroll">表示由一端滾動到另一端，會重複。</marquee>
<marquee behavior="slide">表示由一端滾動到另一端，不會重複。</marquee>
複製程式碼

如果在marquee標籤中同時出現了direction和behavior屬性，那麼scroll和slide的滾動方向將依照direction屬性中引數的設定

  • bgcolor

活動字幕背景顏色

  • direction

活動字幕的滾動方向

屬性值 描述
up 字幕向上滾動
down 字幕向下滾動
left 字幕向左滾動（預設）
right 字幕向右滾動 
<marquee direction="up">字幕的滾動方向：向上</marquee>
<marquee direction="down">字幕的滾動方向：向下</marquee>
<marquee direction="left">字幕的滾動方向：向左</marquee>
<marquee direction="right">字幕的滾動方向：向右</marquee>
複製程式碼
  • loop 設定滾動的次數，當loop為-1時表示一直滾下去，預設為-1
<marquee loop="-1">我會不停地走。</marquee>
<marquee loop="2">我只走兩次哦</marquee>
複製程式碼
  • scrollmount

設定字幕的滾動速度，值越大越快，單位pixels

<marquee scrollamount="10">滾動內容</marquee>
複製程式碼
  • scrolldelay

設定字幕滾動兩次之間的延遲時間，單位為millisecond（毫秒）

值太大會又一步一停頓的效果

<marquee scrolldelay="10">滾動內容</marquee>
複製程式碼

事件

下面這兩個事件經常用到：

onMouseOut="this.start()"：用來設定滑鼠移出該區域時繼續滾動

onMouseOver="this.stop()"：用來設定滑鼠移入該區域時停止滾動

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">滑鼠移入該區域時停止滾動，滑鼠移出該區域時繼續滾動</marquee>
複製程式碼

marquee標籤不是W3C推薦的標籤, 在W3C官方文件中也無法查詢這個標籤, 但是各大瀏覽器對這個標籤的支援非常好

第二種方式：CSS3樣式

使用CSS3中的animation屬性

<div class="marquee-test"><p>不要只因一次挫敗,就放棄你原來決心想達到的目的</p></div>
複製程式碼
.marquee-test {
      width: 100%;
      height: 50px;
      overflow: hidden;
      position: relative;
      white-space: nowrap;
}
p {
      position: absolute;
      animation: marquee 10s linear infinite;
}
@keyframes marquee {
      from {
        left: 100%;
      }
      to {
        left: -100%
      }
}
<!--第二種做法-->
<!--
@keyframes marquee {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%);
      }
}
-->
複製程式碼

相關文章