Html5 語法說明
<marquee> 這裡放要跑馬燈的物件 </marquee>
HTML參數名稱功能
align 物件對齊設定
top（向上對齊）
texttop (頂線對齊)
middle（垂直至中）
absmiddle絕對中央對齊)
bottom（向下對齊）
absbottom (絕對底部對齊)
baseline (底線對齊)
behavior 移動模式設定
scroll（捲動）
slide（跑入後停止）
alternate(來回跑交替)
bgcolor 背景顏色設定(不設定則背景無色)。
direction 移動方向設定
up（上）
down（下）
left（左）
right（右）
height 長度設定(自然數)
hspace 設定移動物件所在的位置距離父容器水平邊框的距離(非負整數)
loop 設定移動的次數，當 loop=-1 表示移動永不停止。(內定值-1)
scrollamount 移動速度設定
整數 1~10 數字越大跑得越快。
scrolldelay 設定移動每一步停頓時間，單位 millisecond（毫秒）。
vspace 設定移動物件所在的位置距離父容器垂直邊框的距離(非負整數)
width 寬度設定(自然數)
常用事件
onMouseOut="this.start()" 設置鼠標移出該區域時繼續移動。
onMouseOver="this.stop()" 用來設置鼠標移入該區域時停止移動。

範例
<div style="background-image: url('images/ggg.png');width:734pt;border:1px black solid;">
      <marquee behavior="lternate" direction="right" height="308pt;" scrollamount="9">
            <img src="images/humanwalk.gif" alt="人形走路">
      </marquee>
</div>

人形走路

範例
<marquee behavior="alternate" direction="down" width="246px;" height="500px;">
      <div style="background:black;color:wheat;width:246px;">
      課程列表
      <ul type="disc">
            <li style="color:red">基本電學</li>
            <li style="color:#66FF66">
                  <marquee behavior="scroll" direction="right">程式設計</marquee>
            </li>
            <li style="color:blue">
                  <marquee behavior="alternate" direction="right">電子學</marquee>
            </li>
            <li style="color:white">
                  <marquee behavior="scroll" scrollamount="2">數位邏輯</marquee>
            </li>
            <li style="color:gold">微處理機</li>
      </ul><br>
      </div>
</marquee>
課程列表
  • 基本電學
  • 程式設計
  • 電子學
  • 數位邏輯
  • 微處理機
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:1pt blue solid">
      <marquee behavior="alternate">
            I ready~~
      </marquee>
</marquee> 		 I ready~~

CSS 寫法範例
HTML參數名稱功能
 <style>
div{
      width: 252px;
      height: 202px;
      background-color: red;
      position: relative;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count:infinite;
}
@keyframes example {
0% {
      background-color:red;
      left:0px; top:0px;
}
25% {
      background-color:yellow;
      left:200px; top:0px;
}
50%{
      background-color:blue;
      left:200px;
      top:200px;
}
75% {
      background-color:green;
      left:0px;
      top:200px;
}
100% {
      background-color:red;
      left:0px;
      top:0px;}
}
</style>

<div id="kk">
      <marquee direction="down" width="250" height="200" behavior="alternate" style="border:1pt blue solid">
            <marquee behavior="alternate">
                  <img src="images/qqac.gif" width="50" height="50" alt=""/>
            </marquee>
      </marquee>
</div>