2016年1月21日 星期四

跑馬燈 marquee

跑馬燈 marquee
不局限於文字,也可以用於圖片,表格等等
<marquee>要跑的文字或物件</marquee>

滑鼠移入就會停止的跑馬燈
<marquee onMouseOver="this.stop()" onMouseOut="this.start()" height="50" direction="up" scrolldelay="4" scrollamount="1">要跑的文字</marquee>
onMouseOver="this.stop()" 表示滑鼠移入"範圍區"既「停止」
onMouseOut="this.start()" 表示滑鼠離開便「跑動」

圖片也可以跟著跑
在跑馬燈<marquee> 標籤開始 至</marquee>結尾,中間所包含的物件 都會跟著跑,包含文字、圖形、超連結...
<marquee>
  <img src="圖形的http位置" width="圖寬" height="圖高">
  <a href="超連結的網址" target="_blank">要超連結的文字</a>
</marquee>



方向:
<direction=#>#=left, right ,up ,down
Ex:<marquee direction=left>右向左移!</marquee>

方式:
<bihavior=#> #=scroll, slide, alternate
Ex:<marquee behavior=scroll>一圈一圈走!</marquee>

循環:
<loop=#> #=次;若未指定循不止(infinite)
Ex:<marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee>

速度:
<scrollamount=#>
Ex:<marquee scrollamount=20>啦啦啦,我走得好快!</marquee>

延遲:
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

方式:
<align=#> #=top, middle, bottom

底色:
<bgcolor=#>

面積:
<height=# width=#>

空白:
<hspace=# vspace=#>

<marquee align="middle"
      direction="up"   // left, right ,up ,down
      bihavior="scroll"   // scroll, slide, alternate
      scrollamount="1"
      width="100%" height="150px"
      class="line"
      id="mar2"
      style=" color: #000000 font-size: 14" bgcolor:"#ff0000" border="0">
</marquee>

onMouseOver ="document.getElementById('mar2').stop()"
onMouseOut ="document.getElementById('mar2').start()"

控制 id 的按鈕