[Javascript]跑馬燈

2009-07-02

10945
0
Javascript

[Javascript]跑馬燈

每個禮拜固定會請member來講解各種主題的技術資訊，最近分配到的是Javascript，在網路上找了一本jsbible的電子書請大家依書中的內容做些分享，這本書總共2000多頁，裡頭有蠻多寶的，今天講的主題是MARQUEE Element跟TextRange，兩個都蠻有趣的，TextRange之前就用過了，今天不打算多講，今天主力放在MARQUEE Element上：

首先我們先在頁面上加入一個MARQUEE的tag：

  <TABLE border=0>
     <TBODY>
        <TR>         
          <TD style="HEIGHT: 97px"><SPAN style="COLOR: #1a73e1"><SPAN style="FONT-SIZE: 20pt">
          	<SPAN style="FONT-FAMILY: 標楷體">我是跑馬燈~跑跑跑</SPAN></SPAN></SPAN>
          </TD>
        </TR>
     </TBODY>
   </TABLE>
</MARQUEE>

實際運作後，我們會看到下面這個樣子：

總之呢，就是我們常見到的跑馬燈的樣子，而這個跑馬燈的功能還有些變化，在很多網頁中我們使用的跑馬燈功能蠻多都是用這個方法做的，還記得兩年前很遜咖，竟然自己用timer去寫了一個跑馬燈的功能。

        document.getElementById('test').behavior = 'alternate';

        //捲動型的跑馬燈，碰到邊框後，內容會消失於邊界，並從另一頭出來      	
        document.getElementById('test').behavior = 'scroll';

        //當內容碰到邊界時停止 
        document.getElementById('test').behavior = 'slide';

        //移動的路徑是上下
        document.getElementById('test').direction = 'down';
  
        //每次移動的距離，省略時的預設值：6px
        document.getElementById('test').scrollAmount = '30';
	  
        //每次移動的時間間隔，省略時的預設值：85毫秒／ms
        document.getElementById('test').scrollDelay = '20';

        //反覆執行的次數	  
        document.getElementById('test').loop = '2';
	  
        //啟動跑馬燈
        document.getElementById('test').start();

        //停止跑馬燈	  
        document.getElementById('test').stop();

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁