JavaScript小技巧製作的跑馬燈效果

來源:互聯網
上載者:User
javascript|技巧

  以下是我們所製作的跑馬燈效果的來源程式

 <html>
 <head>
 <script language="JavaScript">
 <!-- Hide
 var scrtxt="這兒的訊息可以改為你要告訴別人的話  "+"
 或是注意事項 ...";
 var lentxt=scrtxt.length;
 var width=100;
 var pos=1-width;
 function scroll() {
 pos++;
 var scroller="";
 if (pos==lentxt) {
 pos=1-width;
 }
 if (pos<0) {
 for (var i=1; i<=Math.abs(pos); i++) {
 scroller=scroller+" ";}
 scroller=scroller+scrtxt.substring(0,width-i+1);
 }
 else {
 scroller=scroller+scrtxt.substring(pos,width+pos);
 }
 window.status = scroller;
 setTimeout("scroll()",150);
 }
 file://-->
 </script>
 <body >
 Here goes your cool page!
 </body>
 </html>

  此一程式中我們使用了和上面同樣的函數(或部分)setTimeout(...)通知,計時器在時間到時去呼叫 scroll()函數,使得跑馬燈中的文字往前進一格。 在函數的一開始,有一些較羅嗦的計算部分,但這並不難使我們瞭解,這些計算主要是用來取得跑馬燈中的文字應該由那一個位置開始顯示的用途。一開始當然是必需加一些空白在字的左邊,讓文字部分能儘可能靠右,然後再一字字的將空白減少,結果自然就造成字往前移動的效果了。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。