用CSS制作Alpha濾鏡測試板_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
alpha濾鏡給制作網(wǎng)頁特效提供了較大的創(chuàng)作空間,但由于它控制參數(shù)較多,在實(shí)際應(yīng)用時(shí),為了確定一組合適的參數(shù)值,不得不反復(fù)調(diào)整修改,在編輯窗口和預(yù)覽窗口往返倒騰,甚是麻煩,本文介紹了一種簡單的方法。制作一個(gè)“Alpha濾鏡參數(shù)測試板”,在測試板上輸入?yún)?shù)值后,點(diǎn)一下鼠標(biāo),立即可看到結(jié)果,完全的“立等可見”,使你很快就能獲得一組合適地參數(shù)值,從而給你節(jié)約許多寶貴時(shí)間。
測試板具體的制作方法:
1、輸入一段文字或插入一張圖片;
2、制作一個(gè)alpha濾鏡,名稱為:.alpha1。參數(shù)任意,不是使用Dreamweaver的網(wǎng)友,可直接把下面的濾鏡代碼復(fù)制到網(wǎng)頁源代碼的〈head〉與〈/head〉之間;
3、插入一個(gè)層,給層取名為:myimage,這一點(diǎn)很重要,否則javascript程序?qū)o法執(zhí)行,因它不知對那個(gè)對象操作。在層上插入一張圖片或?qū)懮弦欢挝淖郑ㄈ羰怯梦淖謩t應(yīng)給層設(shè)置背景色),在層上加載alpha濾鏡。這個(gè)圖層必需能覆蓋信住下面的文字或圖象;
4、在上面插入的層中再插入一個(gè)層(這個(gè)圖層應(yīng)放置在上次插入的圖層的下方,不要相互遮蓋),并在層上做一個(gè)輸入alpha濾鏡主要參數(shù)的表單,像圖1所示的那樣,表單中要加入一個(gè)“onchage”事件來調(diào)用javascript函數(shù),以達(dá)到動態(tài)改變Alpha濾鏡參數(shù)的目的。網(wǎng)頁源代碼中表單的代碼是這樣的:
這段代碼中的“onChange="setfilter()"”在用Dreamweaver制作表單時(shí)不能自動生成,必須手動加入。表單中的初始值也就是Alpha濾鏡的初始參數(shù)值。
5、在網(wǎng)頁源代碼〈head〉與〈/head〉之間插入下面這段javascript程序:
這段程序的作用是把在表單中輸入的濾鏡參數(shù)值傳給Alpaha濾鏡。
6、在網(wǎng)頁載入時(shí)調(diào)用javascript中的“selfilter”函數(shù),也就是在〈body〉標(biāo)記中加上這樣的一句代碼:onload="setfilter"。其目的是使 Alpha濾鏡獲得初始參數(shù)值。
測試板具體的制作方法:
1、輸入一段文字或插入一張圖片;
2、制作一個(gè)alpha濾鏡,名稱為:.alpha1。參數(shù)任意,不是使用Dreamweaver的網(wǎng)友,可直接把下面的濾鏡代碼復(fù)制到網(wǎng)頁源代碼的〈head〉與〈/head〉之間;
| 〈style type="text/CSS"〉 〈!-- .alpha1 {filter:alpha(opacity=50) } --〉 〈/style〉 |
3、插入一個(gè)層,給層取名為:myimage,這一點(diǎn)很重要,否則javascript程序?qū)o法執(zhí)行,因它不知對那個(gè)對象操作。在層上插入一張圖片或?qū)懮弦欢挝淖郑ㄈ羰怯梦淖謩t應(yīng)給層設(shè)置背景色),在層上加載alpha濾鏡。這個(gè)圖層必需能覆蓋信住下面的文字或圖象;
4、在上面插入的層中再插入一個(gè)層(這個(gè)圖層應(yīng)放置在上次插入的圖層的下方,不要相互遮蓋),并在層上做一個(gè)輸入alpha濾鏡主要參數(shù)的表單,像圖1所示的那樣,表單中要加入一個(gè)“onchage”事件來調(diào)用javascript函數(shù),以達(dá)到動態(tài)改變Alpha濾鏡參數(shù)的目的。網(wǎng)頁源代碼中表單的代碼是這樣的:
| 〈form〉 〈p〉輸入透明度 〈input type="text" name="opacity" size="4" value="100" onChange="setfilter()"〉 〈br〉 輸入結(jié)束狀態(tài)的透明度 〈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制作表單時(shí)不能自動生成,必須手動加入。表單中的初始值也就是Alpha濾鏡的初始參數(shù)值。
5、在網(wǎng)頁源代碼〈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〉 |
這段程序的作用是把在表單中輸入的濾鏡參數(shù)值傳給Alpaha濾鏡。
6、在網(wǎng)頁載入時(shí)調(diào)用javascript中的“selfilter”函數(shù),也就是在〈body〉標(biāo)記中加上這樣的一句代碼:onload="setfilter"。其目的是使 Alpha濾鏡獲得初始參數(shù)值。
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說明:
CSS教程-用CSS制作Alpha濾鏡測試板
。