用CSS制作Alpha濾鏡測試板

2024-07-11 08:21:36

字體：大中小

來源：轉載

供稿：網友

alpha濾鏡給制作網頁特效提供了較大的創作空間，但由于它控制參數較多，在實際應用時，為了確定一組合適的參數值，不得不反復調整修改，在編輯窗口和預覽窗口來回倒騰，甚是麻煩，本文介紹了一種簡單的方法。制作一個“alpha濾鏡參數測試板”，在測試板上輸入參數值后，點一下鼠標，立即可看到結果，完全的“立等可見”，使你很快就能獲得一組合適地參數值，從而給你節約許多寶貴時間。

　　測試板具體的制作方法：

　　1、輸入一段文字或插入一張圖片；

　　2、制作一個alpha濾鏡，名稱為：.alpha1。參數任意，不是使用dreamweaver的網友，可直接把下面的濾鏡代碼復制到網頁源代碼的〈head〉與〈/head〉之間；

〈style type="text/css"〉
〈!--
.alpha1 {filter:alpha(opacity=50) }
--〉
〈/style〉

　　3、插入一個層，給層取名為：myimage，這一點很重要，否則javascript程序將無法執行，因它不知對那個對象操作。在層上插入一張圖片或寫上一段文字（若是用文字則應給層設置背景色），在層上加載alpha濾鏡。這個圖層必需能覆蓋信住下面的文字或圖象；

　　4、在上面插入的層中再插入一個層（這個圖層應放置在上次插入的圖層的下方，不要相互遮蓋），并在層上做一個輸入alpha濾鏡主要參數的表單，像圖1所示的那樣，表單中要加入一個“onchage”事件來調用javascript函數，以達到動態改變alpha濾鏡參數的目的。網頁源代碼中表單的代碼是這樣的：

〈form〉
〈p〉輸入透明度
〈input type="text" name="opacity" size="4" value="100" onchange="setfilter()"〉
〈br〉
輸入結束狀態的透明度
〈input type="text" name="finishopacity" size="4" value="0" onchange="setfilter()" 〉
〈br〉
輸入樣式的值
〈input type="text" name="setstyle" size="3" value="0" onchange="setfilter()" 〉
〈/p〉
〈/form〉

　　這段代碼中的“onchange="setfilter()"”在用dreamweaver制作表單時不能自動生成，必須手動加入。表單中的初始值也就是alpha濾鏡的初始參數值。

　　5、在網頁源代碼〈head〉與〈/head〉之間插入下面這段javascript程序：

〈script language="javascript"〉
〈!--
function setfilter()
{
myimage.filters.alpha.opacity=document.forms(0).opacity.value;
myimage.filters.alpha.finishopacity=document.forms(0). finishopacity.value;
myimage.filters.alpha.style=document.forms(0).setstyle.value;
}
--〉
〈/script〉

　　這段程序的作用是把在表單中輸入的濾鏡參數值傳給alpaha濾鏡。

　　6、在網頁載入時調用javascript中的“selfilter”函數，也就是在〈body〉標記中加上這樣的一句代碼：onload="setfilter"。其目的是使 alpha濾鏡獲得初始參數值。

上一篇：無延遲翻滾的圖形與CSS混合風格按鈕

下一篇：網頁制作css不解析問題