200709070857在自由欄位加語法進行『狀態列跑馬燈』展示

有網友問到有關如何插入『狀態列跑馬燈』,去網路上找了一下,有非常多種不同的跑馬燈的語法,先抓一個回來跟大家分享說明了!

這是逐字由左到右出現,然後當字串第一個字碰到左側的終點時,加速往左移動,將字串收回。

語法如下↓
=============================================================

<script language="javascript">
var msg="狀態列逐字顯示,首字碰左側終點會加移動效果之狀態列跑馬燈!";
var interval = 100;
var spacelen = 120;
var space10=" ";
var seq=0;

function Scroll() {
   len = msg.length;
   window.status = msg.substring(0, seq+1);
   seq++;
   if ( seq >= len ) {
   seq = spacelen;
   window.setTimeout("Scroll2();", interval );
   } else window.setTimeout("Scroll();", interval );
}

function Scroll2() {
   var out="";
   for (i=1; i<=spacelen/space10.length; i++) out += space10;
   out = out + msg;
   len=out.length;
   window.status=out.substring(seq, len);
   seq++;
   if ( seq >= len ) { seq = 0; };
   window.setTimeout("Scroll2();", interval );
}
</script>
<script language="javascript">
Scroll2();
</script>

===========================================================同樣地像之前教的自由欄位教學,將語法貼進自由欄位中,就是貼進下圖第4那個框框內↓

然後如果你這個自由欄位還沒有拉出版面(將自訂欄柵顯示出來),就要去版面編排去拉出來,像下面這樣↓(圖片是拿以前舊文章的圖,理論上是將右側你剛才新增的自由欄位名稱那個抓出來(這些圖都是示意,請依據你自己定義的自由欄位名稱來做動作)

由於這段語法的效果會在狀態列出現,但是本身自由欄位應該是空空如也,如下圖↓
 

所以如果想要不要多一個空白的自由欄位顯示,可以考慮將這段語法貼進其他自由欄位中一同共用一個自由欄位就好!

這一次我是貼進狗言貓語活動中,一同顯示!

PS後記,發現我貼進自由欄位中並不會順利運作,主因於我目前的自由欄位中,有兩個語法都用到了window.onload語法,另一個是自定背景音樂也有用到,這時候的做法要改一下,將它們放在同一個自由欄位語法中,寫另外一個要給onload呼叫的程式function doTwoJob{},然後這個function doTwoJob裡面再去呼叫原本要執行的Scroll2及playNextMusic就可以了!

<script language="javascript">
......

function doTwoJob() {
Scroll2();
playNextMusic();
}

......
</script>

<script language="javascript">
window.onload = doTwoJob;
</script>

9/11更正,不用這麼麻煩啦,真的是我自找麻煩,其實將原本
<script language="javascript">
window.onload = Scroll2;
</script>
改為↓
<script language="javascript">
Scroll2();
</script>

就好啦,不用弄到winodw.onload的語法了!

回應

瘋狂亂收藏家、收藏CPU、手表以及Xuiters

今天去哪玩??
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[台北搬家公司 ...],By 搬家公司-賴工匠 於2016-08-15
Re:[讚!!!],By blog 於2015-06-18
Re:[謝謝],By blog 於2015-06-15
Re:[[Xuite秘笈]上傳M...],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[隨意聽App推薦],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[新版CSS]欄位的...],By 天使的花園 於2015-04-12
Re:[[Xuite秘笈]背景...],By 天使的花園 於2015-04-05
Re:[[Xuite秘笈]背景...],By 天使的花園 於2015-04-05
Re:[名器],By 名器 於2014-12-16
Re:[棋牌游戏平台,...],By 棋牌游戏平台,网上棋牌游戏平台,棋牌游戏平台网站,易发棋牌游戏平台-228238.com 於2014-11-24
CSS樣版三欄兩欄倒數冬季計時居家黑色系右欄藍色風水語法自由欄位保健播放器浮動寬度步道如果劇團行動兒童劇夢想兩欄右iPADCSS語法裝潢耶誕borderiPhone系統家具影音手機家具Pixar登入問題望洋山L型客廳幾何影音播放器邊框標題名稱粉紅基礎入門圖片縮小Style Information童話故事影音選單公告訊息中心more
不顯示的自由欄位