Javascript: 漸層看板

阿瑟 發表



繼上次的簡易看板, 這次加上濾鏡效果, 可以寫出更美觀的的漸層看板喔!

這是一隻由之前"簡易看板"改成的新看板程式:


其實這隻看板跟之前的沒有什麼很大的差別, 只是加上了漸層效果.
程式的原始碼如下:
<script language=javascript>
var messagetotal = 4; // 這裡可以修改訊息的數量, 由於是從 0 開始算, 所以 4 代表的是 5個訊息
var switchblock = 2000; // 每一個訊息展示的時間, 單位為千分之一秒, 1000即一秒

var a = new Array(messagetotal);
a[0] = "17吋 液晶螢幕 12000";
a[1] = "1對4螢幕轉換器 3200";
a[2] = "華碩52X燒錄器 2990";
a[3] = "羅技火星軌跡球 650";
a[4] = "Epson相片印表機 3500";

function swap(x)
{
messagebox.filters.blendTrans.apply();
messagebox.filters.alpha.opacity = 0;
messagebox.filters.blendTrans.play();
setTimeout("showmessage(" + x + ")",500);
}

function showmessage(x)
{
messagebox.filters.blendTrans.apply();
messagebox.filters.alpha.opacity = 100;
messagebox.innerHTML = a[x];
messagebox.filters.blendTrans.play();

if(x==messagetotal)
t = -1;
else
t = x;
setTimeout("swap(" + t + "+1)",switchblock);
}
</script>

<BODY onload="showmessage(0);">

<DIV ID="messagebox" style="Filter:alpha(opacity=0, style=0) blendTrans(duration=0.5, transition=22); width:300px;">
</DIV>

當然你可以直接將script複製起來拿去用, 但是這樣對你script的功力未必有幫助, 因此, 小弟建議您還是稍微看一下語法講解.

語法講解:
  • var a = new Array(messagetotal);, 宣告新的陣列
  • swap()函式是用來將文字消除, 也就是將可見度設定為0 (就是完全消失)
  • blendTrans()是漸層轉換濾鏡, 在script中, 你必須執行blendTrans.apply()之後 (套用濾鏡), 設定效果, 然後用blendTrans.play()進行撥放. 在swap()函式中, 小弟將blendTrans()漸層轉換濾鏡套用之後, 將alpha.opacity (即可見度) 設定為0 (即不可見), 撥放後即可看到訊息慢慢消失的動畫.
  • 在showmessage()函式中, 除了將訊息置換成下一個訊息並且將可見度調為100 (不透明).
  • 下面的if/else是判斷, 讓訊息保持在陣列的範圍內, (從0到使用者設定的數)
  • <BODY onload="showmessage(0);">, 這是代表在網頁載入完畢以後, 執行程式
  • <DIV ID="messagebox" style="Filter:alpha(opacity=0, style=0) blendTrans(duration=0.5, transition=22); width:300;">
    </DIV>    , 這個DIV就是在script中使用的messagebox物件, 訊息就是顯示在這裡面, 你可以將他放在網頁上任何一個地方, 樣式裡面的width (即寬度) 可以自己調整, 預設為300像素

    • 程式邏輯
    從網頁載入執行第一個訊息之後, 利用setTimeout(), 每隔一段時間 (使用者設定) 自動轉換到下一組訊息.
    剩下的語法之前的Javascript教學都有提到, 不懂得可以翻翻舊的教學.

    最後更新日期: 2/7/2003 9:13:15 PM