用CSS製作Alpha濾鏡測試板

來源:互聯網
上載者:User
css|濾鏡

    alpha濾鏡給我們製作網頁特效提供了較大的創作空間,但由於它控制參數較多,在實際應用時,為了確定一組合適的參數值,不得不反覆調整修改,在編輯視窗和預覽視窗來回倒騰,甚是麻煩。我在這裡給你介紹一種方法……
    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" 〉
〈br〉
輸入結束狀態的透明度
〈input type="text" name="finishopacity" size="4" value="0" 〉
〈br〉
輸入樣式的值
〈input type="text" name="setstyle" size="3" value="0" 〉
〈/p〉
〈/form〉
  這段代碼中的“”在用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〉標記中加上這樣的一句代碼:。其目的是使 Alpha濾鏡獲得初始參數值。
  好了,製作結束,按F12看效果吧!從此後,你不用再為選擇alpha濾鏡參數值勤而煩惱了。實際上對於其它參數較多的CSS濾鏡都可仿照本例的方法,製作一個測試板,以解選擇參數值之苦。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.