首頁 > 開發者 > JavaScript
css 濾鏡 ： Pixelate
Pixelate相容性：IE5.5+
文法：
filter : progid:DXImageTransform.Microsoft.Pixelate ( enabled=bEnabled , duration=fDuration , maxSquare=iWidth )
屬性
enabled : 可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。true | false true : 預設值。濾鏡啟用。
false : 濾鏡被禁止。
duration : 可選項。浮點數(Real)。設定或檢索轉換完成所用的時間。其值為秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 參數設定轉換回放的期間。然而，當你一旦調用了 play 方法，在回放持續過程中 Duration 特性就變為唯讀特性。
maxSquare : 可選項。整數值(Integer)。設定或檢索轉換中矩形色塊的最大寬度。取值範圍為 2 - 50 。預設值為 50 。
特性：
Enabled : 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
Duration : 可讀寫。浮點數(Real)。參閱 duration 屬性。
MaxSquare : 可讀寫。整數值(Integer)。參閱 maxSquare 屬性。
Percent : 可讀寫。字串(String)。設定或檢索當前靜態濾鏡輸出在轉換進程中所處的點。取值範圍為 0 - 100 。預設值為 0 ，轉換尚未開始。 100 為轉換完成。
此特性可用於使用轉換濾鏡建立靜態濾鏡效果。設定其值等於定義了轉換進程停止的點。使用轉換濾鏡建立靜態濾鏡效果可遵循以下步驟：
使用轉換濾鏡的 apply 方法。這將捕獲對象內容的初始顯示，設定 Percent 特性值為 0 。
改變對象內容。如 visibility ， innerText ， background-color ， border ，或者其子物件的屬性。
設定轉換濾鏡的 Percent 特性。即確定你希望的轉換進程中某一點。這將捕獲到轉換進程中在該點處的一張內容映像。
設定轉換濾鏡的 Enabled 特性值為 true 。則濾鏡作用的對象將依據擷取到的映像更新其內容。
請注意：你只能使用 visibility 屬性來改變對象的子物件。否則，對子物件的直接改變會被立即顯示出來，而不會被轉換濾鏡捕獲。
status : 唯讀。整數值(Integer)。檢索轉換的目前狀態。0 | 1 | 2 0 : 轉換停止(stop)。
1 : 轉換被應用(apply)。
2 : 轉換在進行(play)。
方法：
apply : 捕獲對象內容的初始顯示，為轉換做必要的準備。無傳回值。
當此方法一旦被調用後，對象屬性的任何改變都不會被顯示，直到你調用 play 方法開始轉換。
請注意：你只能使用 visibility 屬性來改變對象的子物件。否則，對子物件的直接改變會被立即顯示出來，而不會被轉換濾鏡捕獲。
當你調用 play 方法時，轉換呈現出內容的變化結果(對象的屬性和子物件的 visibility 屬性的改變)。
play ( iDuration ) : 開始轉換。無傳回值。參數見下表。
iDuration : 可選項。浮點數(Real)。 指定濾鏡作用持續的時間。預設單位為秒。
使用 play 方法的 iDuration 參數設定轉換回放的期間，其值在轉換的當前一個周期內會替換 Duration 屬性的設定。但是下一次轉換會恢複使用 Duration 屬性設定的值。
stop : 停止轉換回放。並呈現轉換結果映像。同時激發 onfilterchange 事件。無傳回值。
說明：
這個轉換濾鏡是一個複雜的視覺效果。在轉換的前半段，對象內容先顯示為矩形色塊拼貼，然後矩形的寬度由一個像素增加至 MaxSquare 屬性所設定的值。每個矩形的顏色由其所覆蓋地區的像素的顏色平均值決定。接下來的轉換的後半段，矩形被還原為新內容具體的映像像素，顯示出新的內容。
在使用此轉換濾鏡前設定此濾鏡的 Enabled 特性值為 false 。這將預防在轉換髮生前彩色拼貼效果的靜態濾鏡先在對象內容上發生作用。
運行代碼框
<html xmlns:rdl><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Rainer's Handbook</title><style>body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;}body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;}table,img{border:0px;}a{text-decoration:none;color:#003399;}a:hover{color:#000000;text-decoration:underline;}#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}#id_span3{font-size:10px;font-family:tahoma;}</style><style>#idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;filter:progid:DXImageTransform.Microsoft.Pixelate(enabled="false");}#idDiv1{width:200px;height:100px;background-color:#000000;color:#FFFFFF;padding:4px;position:absolute;z-index:3;visibility:hidden;}#idDiv2{width:200px;height:100px;background-color:#000000;color:#FFFFFF;padding:4px;position:absolute;z-index:4;visibility:visible;}#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}</style><script>var sBaseStr="filter : progid:DXImageTransform.Microsoft.Pixelate ( ";var oParentDiv,oCodeDiv;function rdl_doInit(e){oParentDiv=document.all("idParentDiv");oCodeDiv=document.all("idCodeDiv");rdl_play();}function rdl_change(e){with (document.all("idSel1")) var sValue1=options[selectedIndex].value;with (document.all("idSel2")) var sValue2=options[selectedIndex].value;oCodeDiv.innerText=sBaseStr+",enabled="+oParentDiv.filters[0].enabled+",duration="+sValue1+",maxSquare="+sValue2+" ) ;";with (oParentDiv.filters[0]) {Duration=sValue1;MaxSquare=sValue2;}}function rdl_play(){with (oParentDiv) {if (children[0].style.visibility=="hidden") children[1].style.visibility="visible";else children[1].style.visibility="hidden";filters[0].Apply();if (children[0].style.visibility=="hidden") children[0].style.visibility="visible";else children[0].style.visibility="hidden";if (children[1].style.visibility=="hidden") children[1].style.visibility="visible";else children[1].style.visibility="hidden";filters[0].play();}}window.onload=rdl_doInit;</script></head><body><div id=idParentDiv><div id=idDiv1><img src="/UploadPic/2007-7/200777165613425.gif" style="float:left;border:1px solid #FFFFFF;">我是合成濾鏡擷取的輸入<b> A </b>。</div><div id=idDiv2><img src="/UploadPic/2007-7/200777165613802.gif" style="float:left;border:1px solid #FFFFFF;">我是合成濾鏡擷取的輸入<b> B </b>。</div></div><br><table><tr><td><select id=idSel1 ><option value="0.5" style="font-weight:bold;">---Duration---<option value="1">1<option value="2">2<option value="4">4<option value="5">5<option value="6">6<option value="12">12</select></td><td><select id=idSel2 ><option value="50" style="font-weight:bold;">---MaxSquare---<option value="25">25<option value="10">10<option value="5">5</select></td><td><input type=button value=" Play " ></td><td><input type=button value=" Stop " ></td></tr></table><br><div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Pixelate (enabled="false")</div><br> <br> <br><div id=id_div3>蘇昱作品·著作權<br><span id=id_span3>©2002 Rainer Su . All rights reserved .</span></div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
forestgan寫的效果如下:
<script language="JavaScript1.1">var slidespeed=3000//specify imagesvar slideimages=new Array("/UploadPic/2007-7/200777165613783.jpg","2482150_2_1.jpg","2482150_3_2.jpg")//specify corresponding linksvar slidelinks=new Array("#","#","#")var imageholder=new Array()var ie55=window.createPopupfor (i=0;i<slideimages.length;i++){imageholder[i]=new Image()imageholder[i].src=slideimages[i]}function gotoshow(){window.location=slidelinks[whichlink]}//--></script><a href="javascript:gotoshow()"><img src="/UploadPic/2007-7/200777165613783.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></a><script language="JavaScript1.1"><!--var whichlink=0var whichimage=0var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0function slideit(){if (!document.images) returnif (ie55) document.images.slide.filters[0].apply()document.images.slide.src=imageholder[whichimage].srcif (ie55) document.images.slide.filters[0].play()whichlink=whichimagewhichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0setTimeout("slideit()",slidespeed+pixeldelay)}slideit()//--></script>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
