首頁 > 開發者 > 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="http://www.blueidea.com/articleimg/bbsimg/topic5.gif" style="float:left;border:1px solid #FFFFFF;">我是合成濾鏡擷取的輸入<b> A </b>。</div>
<div id=idDiv2><img src="http://www.blueidea.com/articleimg/bbsimg/reply5.gif" style="float:left;border:1px solid #FFFFFF;">我是合成濾鏡擷取的輸入<b> B </b>。</div>
</div>
<br>
<table><tr><td>
<select id=idSel1 onchange="rdl_change();">
<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 onchange="rdl_change();">
<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 " onclick="if (oParentDiv!=null) rdl_play();">
</td><td>
<input type=button value=" Stop " onclick="if (oParentDiv!=null) oParentDiv.filters[0].stop();">
</td></tr></table>
<br>
<div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Pixelate (enabled="false")</div>
<br> <br> <br>
<div</p><div id="ad_f10" class="ad_f10"><SCRIPT src="/ad/ad_f10.js"></SCRIPT></div><div id="ad_f11" class="ad_f11"><SCRIPT src="/ad/ad_f11.js"></SCRIPT></div><div class='kjy'><strong>文章整理:</strong><a href='http://www.diybl.com' target=_blank><strong><font color="#CC0000">DIY部落</font></strong></a> <strong>http://www.diybl.com</strong> (本站) <a href="javascript:self.location='/user/chm/rar.asp?c_id=4361'" class="redlink">【點擊打包該文章】</a></div><div class=kvl> [1] <a href=http://www.diybl.com/course/1_web/javascript/Javascriptshl/200721/4361_2.html> [2]</a></div></DIV><div id="ad_f4" class="ad_f4"><SCRIPT src="/ad/ad_f4.js"></SCRIPT></div>
<DIV class=mediacontent>如果圖片或頁面不能正常顯示請<a onClick="openerror('4361','Javascript實現經典的圖片轉場效果');" onMouseOver="this.style.cursor='hand';" class="redlink">點擊這裡</a> 站內搜尋：
<input type="text" name="wd3" size="25" maxlength="255">
<input type="button" value="千尋搜尋" onClick="tosearch(document.all.wd3);"></DIV>
<DIV style="CLEAR: both" align=center></DIV>
<DIV class=toollinks>【<A href="javascript:window.external.addFavorite(window.location,'Javascript實現經典的圖片轉場效果-DIY部落');">收藏此頁</a>】【<A
href="http://www.diybl.com/course/1_web/javascript/Javascriptshl/2afdokf.html" target="_blank">欄目頁面</A>】【<A href="#comment">發表評論</A>】【<a href="#">返回頂部</a>】【<A
href="javascript:window.close()">關閉</A>】 </DIV>
<div class="p_bottom">上一篇文章：<a href="/course/1_web/javascript/Javascriptshl/200721/4362.html">COOL而實用的動態效果</a><br>下一篇文章：<a href="/course/1_web/javascript/Javascriptshl/200721/4360.html">用Groovy Template 產生代碼</a></div></DIV>
<DIV style="CLEAR: both; BACKGROUND: #fff; OVERFLOW: hidden; HEIGHT: 8px"></DIV>
<DIV id=links align=center>
<TABLE class=xgzt cellSpacing=0 cellPadding=0 width=687>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 5px" bgColor=#e1effa>
<H3>推薦文章</H3></TD></TR>
<TR>
<TD bgColor=#fcfeff><div class="tj_l tj"><nobr><a href="/course/1_web/javascript/Javascriptshl/200721/4176.html" target="_blank">如何?HTML頁面地址欄參數傳遞與擷取</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4211.html" target="_blank">非常實用的效果：用JS計算剩餘可用字數</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4599.html" target="_blank">【推薦】非常不錯的Javascript指令碼</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4229.html" target="_blank">JavaScript應用執行個體：點出統計器</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4659.html" target="_blank">用JavaScript自動產生等比例所略圖</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4354.html" target="_blank">JavaScript實現AJAX的拖動效果</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4602.html" target="_blank">用Javascript使網頁圖片產生旋轉效果</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4270.html" target="_blank">瀏覽器語種檢測，適合於多語言版本的網站</a></div><div class="tj_r tj"><nobr><a href="/course/1_web/javascript/Javascriptshl/20061218/1223.html" target="_blank">js“樹”讀取xml資料</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4597.html" target="_blank">參數傳遞解決window.open的session變數丟失</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4693.html" target="_blank">實現Web頁面上的右鍵捷徑功能表</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4287.html" target="_blank">一款DIV+CSS導航條效果</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4396.html" target="_blank">AJAX案例研究之詳細剖析Gmail應用</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4126.html" target="_blank">JS開發字典探測使用者名稱或密碼工具</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4715.html" target="_blank">網頁中圖片的隨機顯示</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4606.html" target="_blank">基於Ajax的應用程式架構匯總</a></div>
</TD>
</TR></TBODY></TABLE>
</DIV>
<DIV style="CLEAR: both; BACKGROUND: #fff; OVERFLOW: hidden; HEIGHT: 8px"></DIV>
<div class="cleanblock2" style="background:#ededed; border:1px solid #dedfde"><h3>文章評論</h3></div>
<div class="cleanblock3"><iframe name="pindex" src="/user/showcomment2.asp?c_id=4361" frameborder=false scrolling="no" width="100%" height="0" class="comm_index" onload="window.setTimeout('iframe_resize()',1000)"></iframe></div>
<DIV style="CLEAR: both; BACKGROUND: #fff; OVERFLOW: hidden; HEIGHT: 8px"></DIV>
<form action="/user/comment.asp?id=4361&url=http://www.diybl.com/course/1_web/javascript/Javascriptshl/200721/4361.html" style="margin-top:0px;" method="post">
<div class="comment_1">
<div class="cleanblock2"><a name="comment"></a><h3>請您留言</h3></div>
<div class="cleanblock" style="padding-left:20px; padding-right:20px">
<label for="label">暱稱:
<input name="hypocorism" type="text" size="15" value="DIY部落網友" onClick="this.focus();this.select()"maxlength="20">
<a href="/user/register.asp" target="_blank"><font color=red>註冊會員</font></a> <a href="/user/login.asp" target="_blank">會員登陸</a>
<br />
<span style="line-height:25px"><a href="/user/chgpage/cata.asp?num=1010802" target="_blank"><font color="#990000"><strong>點擊這裡</strong></font></a></span> 自己製作打包的chm電子書教程
<textarea name="content" style="VERTICAL-ALIGN: text-top; WIDTH: 100%; HEIGHT: 7em" rows="6" onFocus="showchk();">
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
