本实例演示如何在网页上输出经过虚化的图像，并且可以调节虚化的程度。
向网页上添加3个下拉列表框和一个IMG对象，设计完成的网页界面如图4-29所示。
图4-29 设计完成的网页
设置IMG对象的name为filterIMG，将图像的style属性中的filter设置为DXImageTransform.Microsoft.Blur：
<IMG style="left: 193px; position: absolute; TOP: 8px;
filter:progid:DXImageTransform.Microsoft.Blur( PixelRadius=0,
MakeShadow=false,
ShadowOpacity=.75)"
src="images/yushu.jpg"
name="filterIMG">
图像的虚化程度是由各个下拉列表框的onchange事件控制，下面以PixelRadius对应的下拉列表框为例来说明。
<B> PixelRadius:</B>
<SELECT onchange="filterIMG.filters.item(
'DXImageTransform.Microsoft.Blur').PixelRadius=
this.options[this.selectedIndex].value">
<OPTION value="0" selected>0</OPTION>
<OPTION value="1">1</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
</SELECT>
在PixelRadius下拉列表框中包含有“1”、“3”、“5”、“10”和“20”五个列表项，当用户在网页上改变PixelRadius下拉列表框的选项时，就会激活onchange事件，通过语句filterIMG.filters.item('DXImageTransform.Microsoft.Blur').PixelRadius = this.options[this. selectedIndex].value设置filterIMG图像的虚化程度。
<HTML>
<HEAD>
<TITLE>Blur Filter</TITLE>
<SCRIPT>
function fnMakeShadow(oObj)
{
var bSelected = oObj.options[oObj.selectedIndex].value;
filterIMG.filters.item
('DXImageTransform.Microsoft.Blur').MakeShadow=bSelected;
}
</SCRIPT>
</HEAD>
<BODY>
<B> PixelRadius:</B>
<SELECT onchange="filterIMG.filters.item(
'DXImageTransform.Microsoft.Blur').PixelRadius=
this.options[this.selectedIndex].value">
<OPTION value="0" selected>0</OPTION>
<OPTION value="1">1</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
</SELECT><BR><BR>
<B> MakeShadow:</B>
<SELECT onchange="fnMakeShadow(this);">
<OPTION value="true">True</OPTION>
<OPTION value="false" selected>False</OPTION>
</SELECT>
<BR><BR>
<B> ShadowOpacity:</B>
<SELECT id=oSelectShadowOpacity
onchange="filterIMG.filters.item(
'DXImageTransform.Microsoft.Blur').ShadowOpacity=
this.options[this.selectedIndex].value">
<OPTION value="0.00">0.00</OPTION>
<OPTION value="0.25">0.25</OPTION>
<OPTION value="0.50">0.50</OPTION>
<OPTION value="0.75" selected>0.75</OPTION>
<OPTION value="1.00">1.00</OPTION>
</SELECT>
<IMG style="left: 193px; position: absolute; TOP: 8px;
filter:progid:DXImageTransform.Microsoft.Blur( PixelRadius=0,
MakeShadow=false,
ShadowOpacity=.75)"
src="images/yushu.jpg"
name="filterIMG">
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-30所示。
图4-30 初始画面
选择PixelRadius为10，结果如图4-31所示。
图4-31 虚化图像效果之一
选择MakeShadow为True，选择ShadowOpacity为0.25，结果如图4-32所示。
图4-32 虚化图像效果之二
E- mail:
本站ICP备案号：
