精通CSS濾鏡（filter）（實例解析）

很久沒弄弄美工了，前端時間因爲學校的一個小網站的老師須要網站總體爲綠色風格，可是他們又不能提供相關素材，這個

項目就一直拖着，需求也定不下來。後臺基本功能都已經哦了，就等頁面了，原本是想好好學學別的東西，鞏固下Java一些基礎，

可是這事拖着，仍是夠不爽的。security框架的例子也很差弄，因而仍是決定總結一下最近學習的CSS濾鏡。Css濾鏡比較帥，能夠

取代一部分PS才能實現的效果，可是缺點也比較明顯，瀏覽器並非都支持。但考慮到IE6，7...佔的市場份額仍是挺很大的，因此有

學習的必要。網上不缺CSS濾鏡的知識，可是大可能是長篇大論，或不夠全面。如今結合本身作的例子和網上的資料，本身的學習心得

總結以下。畢竟我不是專業搞美工，因此這篇隨筆，是基本是面向初學者，並使其快速掌握。也瞭解如今的CSS都能作什麼。

爲了充實內容，順便給出jQuery實現彈出層特效的源碼。

　　CSS（Cascading Style Sheets) 層疊樣式表單。1998年5月12日，Cascading Style Sheets,level 2 成爲了W3C 

的新標準。同時,」W3C CoreStyles '和CSS2 Validation Service' 以及「CSS Test Suite' 宣佈成立。它是一組樣式，樣式

中的屬性在HTML元素中依次出現，並顯示在瀏覽器中。樣式能夠定義在HTML文檔的標誌（TAG）裏，也能夠在外部附加文檔

做爲外加文檔。此時，一個樣式表單能夠做用於多個頁面---甚至整個站點，所以具備更好的易用性和擴展性。

        對於濾鏡和漸變效果，前者是基礎，由於後者就是濾鏡效果的不斷變化和演示更替。當濾鏡和漸變效果結合到一個基本

的SCRIPT小程序中後，網頁設計者就能夠擁有一個創建動態交互文檔的強大工具。也就是CSS FILTER+ SCRIPT， 這就說

明想要創建動態的文檔還要一些SCRIPT （腳本語言）的基礎。 

　　可視化濾鏡屬性只能用在HTML控件元素上，不能使用div的id，class定義。所謂的HTML空間元素就是它們在頁面上定

義了一個矩形空間，瀏覽器的窗口能夠顯示這些空間。下面列出了HTML合法的控件和它們的說明。 

元素                                       說明 

BODY                      網頁文檔的主體元素，全部的可見範圍都在元素內 
BUTTON                  表單域的按鈕，能夠有「發送(submit)」、「重置(reset)」等形式 
DIV                         定義了網頁上的一個區域，這個區域的高度、寬度或者絕對位置都是以知的 
IMG                         圖片元素，經過指定「src'屬性來指定圖片的來源 
INPUT                      輸入表單域 
MARQUEE                移動字幕效果 
SPAN                      定義了網頁上的一個區域，這個區域的高度、寬度或者絕對位置都是以知的 
TABLE                    表格 
TD                         表格數據單元格 
TEXTAREA              文本區域 
TFOOT                   多行輸入文本框 
TH                         表格標題單元格 
THEAD                   表格標題 
TR                         表格行 

////////////////////////////////////////

IE4.0以上支持的濾鏡屬性表 

濾鏡效果 描述 ：

Alpha 設置透明度 
Blru 創建模糊效果 
Chroma 把指定的顏色設置爲透明 
DropShadow 創建一種偏移的影象輪廓，即投射陰影 
FlipH 水平反轉 
FlipV 垂直反轉 
Glow 爲對象的外邊界增長光效 
Grayscale 下降圖片的彩色度 
Invert 將色彩、飽和度以及亮度值徹底反轉創建底片效果 
Light 在一個對象上進行燈光投影 
Mask 爲一個對象創建透明膜 
Shadow 創建一個對象的固體輪廓，即陰影效果 
Wave 在X軸和Y軸方向利用正弦波紋打亂圖片 
Xray 只顯示對象的輪廓 

 

下面分別闡述：

一、Alpha 濾鏡 
語法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, 
starty=starty,finishx=finishx,finishy=finishy)} 

'Alpha'屬性是把一個目標元素與背景混合。設計者能夠指定數值來控制混合的程度。這種「與背景混合」通俗地說

就是一個元素的透明度。經過指定座標，能夠指定點、線、面的透明度。他們的參數含義分別以下：

 

「opacity'表明透明度水準。默認的範圍是從0 到 100，他們實際上是百分比的形式。也就是說，0表明徹底透明，

100表明徹底不透明。」finishopacity'是一個可選參數，若是想要設置漸變的透明效果，就可使用他們來指定

結束時的透明度。範圍也是0 到 100。「style' 參數指定了透明區域的形狀特徵。其中0表明統一形狀、1表明線形、2表明放射狀

、3表明長方形。」STARTX「和」STARTY「表明漸變透明效果的開始X和Y座標。」

FINISHX「和」FINISHY「表明漸變透明效果結束X和Y 的座標。 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body { FILTER : ALPHA(opacity=50,finishopacity=80,style=2 }
</ style >
</ head >
< body >
< div  class ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font ></ div >
< div >< img  src ="image/ch2.gif"   /></ div >
</ body >
</ html >

二、Blur 濾鏡
語法：對於HTML：{filter:blur(add=add,direction=direction,strength=strength)} 
對於Script語言： [oblurfilter=] object.filters.blur 
用手指在一幅還沒有乾透的油畫上迅速劃過期，畫面就會變得模糊。」Blur'就是產生一樣的模糊效果。 

「ADD」參數是一個布爾判斷「TRUE（默認）」或者「FALSE」。它指定圖片是否被改變成印象派的模糊

效果。模糊效果是按順時針的方向進行的，「DIRECTION」參數用來設置模糊的方向。其中0度表明垂直

向上，而後每45度爲一個單位。它的默認值是向左的270度。「STRENGTH「值只能使用整數來指定，

她表明有多少像素的寬度將受到模糊影響。默認是5個。

代碼以下：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body { filter : blur(add=ture,direction=135,strength=200) }
</ style >
</ head >
< body >
< div  class ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font ></ div >
< div >< img  src ="image/ch2.gif"   /></ div >
</ body >
</ html >

 

效果：

三、FlipH, FlipV 濾鏡 
語法：{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉

四、Chroma 濾鏡 
語法：{filter:chroma(color=color)} 
使用」Chroma'屬性能夠設置一個對象中指定的顏色爲透明色，參數COLOR即要透明的顏色。
代碼以下：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body { filter : chroma(color=#CC33C2) }
</ style >
</ head >
< body >
< div  class ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font ></ div >
< div >< img  src ="image/ch2.gif"   /></ div >
</ body >
</ html >

能夠屏蔽顏色，大有用處。

五、DropShadow 濾鏡 
語法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)} 

「DropShaow'顧名思義就是添加對象的陰影效果。其工做原理是創建一個偏移量，加上較深。

'Color'表明投射陰影的顏色，'offx'和'offy'分別是X方向和Y方向陰影的餓偏移量。

'Positive'參數是一個布爾值，若是爲「TRUE（非0）」，那麼就爲任何的非透明像素創建可見的投影。

若是爲「FASLE（0）」，那麼就爲透明的像素部分創建透明效果 代碼以下：

dropshadow(color=gray,offx=5,offy=5.positive=0) 

效果：

六、Glow 濾鏡 
語法：{filter:glow(color=color,strength)} 

當對一個對象使用'glow'屬性後，這個對象的邊緣就會產生相似發光的效果。「COLOR」是指定

發光的顏色，「STRENGTH」則是強度的表現，能夠從1到255之間的任何整數來指定這個力度。 

filter:glow(color=red,strength=10) 後的效果 

filter:glow(color=#ffff00,strength=5) 後的效果 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body { filter : glow(color=red,strength=10) }
.try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  class ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >

 

七、Gray ,Invert,Xray 濾鏡
語法：{filter:gray} ,{filter:invert},{filter:xray} 

Gray濾鏡是把一張圖片變成灰度圖；（汶川大地震後不少網站色調都變灰色，就是用的這一點代碼實現的）
Invert濾鏡是把對象的可視化屬性所有翻轉，包括色彩、飽和度、和亮度值；
Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮，也就是所謂的「X」光片。 

 

效果：

效果：

 

八、Light 濾鏡 
語法：Filter{light} 

這個屬性模擬光源的投射效果。一旦爲對象定義了「LIGHT'濾鏡屬性，那麼就能夠調用它的「方法(Method)'來設置或者改變屬性。「LIGHT'可用的方法有： 

·AddAmbient 加入包圍的光源 
·AddCone 加入錐形光源 
·AddPoint 加入點光源 
·Changcolor 改變光的顏色 
·Changstrength 改變光源的強度 
·Clear 清除全部的光源 
·MoveLight 移動光源

addAmbient (iRed,iGreen,iBlue,iStrength) : 爲濾鏡添加環境光。環境光是無方向的，而且均勻的灑在頁面的表面。環境光有顏色和強度值，能夠爲對象田家更多的顏色。它通

常和其餘光一塊兒使用。無返回值。參數見下表。
iRed : 必選項。整數值(Integer)。 指定紅色值。取值範圍爲 0 - 255 。 
iGreen : 必選項。整數值(Integer)。 指定綠色值。取值範圍爲 0 - 255 。 
iBlue : 必選項。整數值(Integer)。 指定藍色值。取值範圍爲 0 - 255 。 
iStrength : 必選項。整數值(Integer)。 指定光強度。取值範圍爲 0 - 100 。

changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改變光的顏色。無返回值。參數見下表。
iLightNumber : 必選項。整數值(Integer)。 指定光的標識符。 
iRed : 必選項。整數值(Integer)。指定紅色值。取值範圍爲 0 - 255 。 
iGreen : 必選項。整數值(Integer)。指定綠色值。取值範圍爲 0 - 255 。 
iBlue : 必選項。整數值(Integer)。指定藍色值。取值範圍爲 0 - 255 。 
fAbsolute : 必選項。布爾值(Boolean)。指定改變是替換當前設置的絕對值，仍是加到當前設置的相對值。此參數不等於零表示採用絕對值。不然表示採用相對值。


能夠定義光源的虛擬位置，以及經過調整X軸和Y軸的數值來控制光源焦點的位置，還能夠調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬

性。若是動態的設置光源，可能回產生一些意想不到的效果。

實現圖片自動變色效果

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body {}
.try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  class ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"  style ="filter:light(); width:400; height:300"  onload ="javascript:this.filters.light.addAmbient(10,250,100,55)"  

onmousemove ="javascript:this.filters.light.changeColor(0,150,100,50,0)" /></ div >< br  />< br  /></ div >
</ body >
</ html >

九、Mask 濾鏡 
語法：{filter:mask(color=color)} 

使用'MASK'屬性能夠爲對象創建一個覆蓋於表面的膜，其效果就象戴者有色眼鏡看物體同樣。 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body {  filter : mask(color=yellow) ; }
#try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  id ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >

雖然實現，可是效果並不想一想象的那樣帥，很差用。

十、Shadow 濾鏡
語法：{filter:shadow(color=color,direction=direction)} 

利用「Shadow」屬性能夠在指定的方向創建物體的投影，COLOR是投影色，DIRECTION是設置投影的方向。其中0度表明垂直向上，而後每45度爲一個單位。它的默認值是向左的270

度。 

filter:shadow(color=red,direction=225) 
filter:shadow(color=blue,direction=225) 
filter:shadow(color=gray,direction=225) 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body {  filter : shadow(color=red,direction=225) ; }
#try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  id ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >

效果：

十一、Wave 濾鏡 語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} 

'wave' 屬性把對象按垂直的波形樣式打亂。默認是「TRUE（非0）」， 
「ADD」表示是否要把對象按照波形樣式打亂， 
「FREQ」是波紋的頻率，也就是指定在對象上一共須要產生多少個完整的波紋， 
「LIGHTSTRENGTH」參數能夠對於波紋加強光影的效果，範圍0----100， 
「PHASE」參數用來設置正弦波的偏移量。 
「STRENGTH」表明振幅大小。 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css濾鏡 </ title >
< style >
body {  filter : wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=20) ; }
#try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  id ="try" >< font  color ="#CC33C2" > 施楊de編程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >

效果：

jQuery彈出層源碼：

頁面：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >
<!--  saved from url=(0045)http://interface.eyecon.ro/demos/windows.html  -->
< HTML  xmlns ="http://www.w3.org/1999/xhtml" >
< HEAD >< TITLE > Resizeable demo - Interface plugin for jQuery </ TITLE >
< META  http-equiv =Content-Language  content =en >
< META  http-equiv =Content-Type  content ="text/html; charset=utf-8" >
< SCRIPT 
src ="js/jquery.js"  
type =text/javascript ></ SCRIPT >
< SCRIPT 
src ="js/interface.js"  
type =text/javascript ></ SCRIPT >
< link  href ="css/div_show.css"  rel ="stylesheet"  type ="text/css"  media ="all" >
< META  content ="MSHTML 6.00.6000.16735"  name =GENERATOR >
</ HEAD >
< BODY >< A  id =windowOpen > 管理員登錄 </ A >
< DIV  id =window >
< DIV  id =windowTop >
< DIV  id =windowTopContent > 登錄界面 </ DIV >
< IMG  id =windowMin 
src ="css/images/window_min.jpg" >  
< IMG  id =windowMax 
src ="css/images/window_max.jpg" >  
< IMG  id =windowClose 
src ="css/images/window_close.jpg" >  
</ DIV >
< DIV  id =windowBottom >
< DIV  id =windowBottomContent ></ DIV ></ DIV >
< DIV  id =windowContent >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P ></ DIV >< IMG  id =windowResize 
src ="css/images/window_resize.gif" >  
</ DIV >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< SCRIPT  type ="text/javascript"  src ="js/div_show.js" ></ SCRIPT >
< SCRIPT  language =JavaScript  type =text/javascript > var  client_id  =   1 ; </ SCRIPT >

</BODY></HTML> 

 

css源碼：

BODY  {
    BACKGROUND :  #fff ;  HEIGHT :  100%
}
#window  {
    DISPLAY :  none ;  LEFT :  200px ;  OVERFLOW :  hidden ;  WIDTH :  400px ;  POSITION :  absolute ;  TOP :  100px ;  HEIGHT :  300px
}
#windowTop  {
    BACKGROUND-POSITION :  right top ;  BACKGROUND-IMAGE :  url(images/window_top_end.png) ;  OVERFLOW :  hidden ;  CURSOR :  move ;  BACKGROUND-REPEAT :  no-repeat ;  POSITION :  relative ;  HEIGHT :  30px
}
#windowTopContent  {
    BACKGROUND-POSITION :  left top ;  FONT-WEIGHT :  bold ;  FONT-SIZE :  14px ;  BACKGROUND-IMAGE :  url(images/window_top_start.png) ;  OVERFLOW :  hidden ;  COLOR :  #6caf00 ;  TEXT-INDENT :  10px ;  LINE-HEIGHT :  30px ;  MARGIN-RIGHT :  13px ;  BACKGROUND-REPEAT :  no-repeat ;  FONT-FAMILY :  Arial, Helvetica, sans-serif ;  HEIGHT :  30px
}
#windowMin  {
    RIGHT :  25px ;  CURSOR :  pointer ;  POSITION :  absolute ;  TOP :  10px
}
#windowMax  {
    DISPLAY :  none ;  RIGHT :  25px ;  CURSOR :  pointer ;  POSITION :  absolute ;  TOP :  10px
}
#windowClose  {
    RIGHT :  10px ;  CURSOR :  pointer ;  POSITION :  absolute ;  TOP :  10px
}
#windowBottom  {
    BACKGROUND-POSITION :  right bottom ;  BACKGROUND-IMAGE :  url(images/window_bottom_end.png) ;  BACKGROUND-REPEAT :  no-repeat ;  POSITION :  relative ;  HEIGHT :  270px
}
#windowBottomContent  {
    BACKGROUND-POSITION :  left bottom ;  BACKGROUND-IMAGE :  url(images/window_bottom_start.png) ;  MARGIN-RIGHT :  13px ;  BACKGROUND-REPEAT :  no-repeat ;  POSITION :  relative ;  HEIGHT :  270px
}
#windowResize  {
    RIGHT :  3px ;  CURSOR :  se-resize ;  BOTTOM :  5px ;  POSITION :  absolute
}
#windowContent  {
    BORDER-RIGHT :  #6caf00 1px solid ;  BORDER-TOP :  #6caf00 1px solid ;  FONT-SIZE :  11px ;  LEFT :  10px ;  OVERFLOW :  auto ;  BORDER-LEFT :  #6caf00 1px solid ;  WIDTH :  375px ;  MARGIN-RIGHT :  10px ;  BORDER-BOTTOM :  #6caf00 1px solid ;  FONT-FAMILY :  Arial, Helvetica, sans-serif ;  POSITION :  absolute ;  TOP :  30px ;  HEIGHT :  255px ;  BACKGROUND-COLOR :  #fff
}
#windowContent *  {
    MARGIN :  10px
}
.transferer2  {
    BORDER-RIGHT :  #6baf04 1px solid ;  BORDER-TOP :  #6baf04 1px solid ;  FILTER :  alpha(opacity=30) ;  BORDER-LEFT :  #6baf04 1px solid ;  BORDER-BOTTOM :  #6baf04 1px solid ;  BACKGROUND-COLOR :  #b4f155 ;  -moz-opacity :  0.3 ;  opacity :  0.3
}

 

js源碼：

$(document).ready(
     function ()
    {
        $( ' #windowOpen ' ).bind(
             ' click ' ,
             function () {
                 if ($( ' #window ' ).css( ' display ' )  ==   ' none ' ) {
                    $( this ).TransferTo(
                        {
                            to: ' window ' ,
                            className: ' transferer2 ' , 
                            duration:  400 ,
                            complete:  function ()
                            {
                                $( ' #window ' ).show();
                            }
                        }
                    );
                }
                 this .blur();
                 return   false ;
            }
        );
        $( ' #windowClose ' ).bind(
             ' click ' ,
             function ()
            {
                $( ' #window ' ).TransferTo(
                    {
                        to: ' windowOpen ' ,
                        className: ' transferer2 ' , 
                        duration:  400
                    }
                ).hide();
            }
        );
        $( ' #windowMin ' ).bind(
             ' click ' ,
             function ()
            {
                $( ' #windowContent ' ).SlideToggleUp( 300 );
                $( ' #windowBottom, #windowBottomContent ' ).animate({height:  10 },  300 );
                $( ' #window ' ).animate({height: 40 }, 300 ).get( 0 ).isMinimized  =   true ;
                $( this ).hide();
                $( ' #windowResize ' ).hide();
                $( ' #windowMax ' ).show();
            }
        );
        $( ' #windowMax ' ).bind(
             ' click ' ,
             function ()
            {
                 var  windowSize  =  $.iUtil.getSize(document.getElementById( ' windowContent ' ));
                $( ' #windowContent ' ).SlideToggleUp( 300 );
                $( ' #windowBottom, #windowBottomContent ' ).animate({height: windowSize.hb  +   13 },  300 );
                $( ' #window ' ).animate({height:windowSize.hb + 43 },  300 ).get( 0 ).isMinimized  =   false ;
                $( this ).hide();
                $( ' #windowMin, #windowResize ' ).show();
            }
        );
        $( ' #window ' ).Resizable(
            {
                minWidth:  200 ,
                minHeight:  60 ,
                maxWidth:  700 ,
                maxHeight:  400 ,
                dragHandle:  ' #windowTop ' ,
                handlers: {
                    se:  ' #windowResize '
                },
                onResize :  function (size, position) {
                    $( ' #windowBottom, #windowBottomContent ' ).css( ' height ' , size.height - 33   +   ' px ' );
                     var  windowContentEl  =  $( ' #windowContent ' ).css( ' width ' , size.width  -   25   +   ' px ' );
                     if  ( ! document.getElementById( ' window ' ).isMinimized) {
                        windowContentEl.css( ' height ' , size.height  -   48   +   ' px ' );
                    }
                }
            }
        );
    }
);

 

再下載兩個jquery的文件分別是：

interface.js，jquery.js

哦了

網友韋恩卑鄙：

提供了一個濾鏡學習網址，感受不錯，因而加上來：http://msdn.microsoft.com/zh-cn/library/ms532853(en-us,VS.85).aspx 

-------------------------------------------------------------------------------------------------

轉載註明：www.cnblogs.com/shiyangxt