本实例演示如何在网页上输出放大或缩小后的图像。
向网页上添加一个DIV层，作为图像的容器，然后添加一个按钮，设计完成的网页界面如图4-7所示。
图4-7 设计完成的网页
设置DIV图层的id为oDiv，然后将图层的style属性中的filter设置为DXImageTransform. Microsoft.AlphaImageLoader，且应用特效的图像是images/fruit.jpg，图像会自动适应DIV图层的大小，从而达到放大或缩小的效果：
<DIV id="oDiv"
style="position:relative; height:250px; width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/lige.jpg', sizingMethod='scale');" >
</DIV>
图层中图像的缩放效果是由按钮的onclick事件控制，而onclick事件映射到fnToggle函数，fnToggle函数的代码如下：
var bToggle = 1
function fnToggle(oObj)
{
if (bToggle)
{
bToggle = 0;
oDiv.filters(0).sizingMethod="image";
oObj.innerText='Enlarge It';
}
else
{
bToggle = 1;
oDiv.filters(0).sizingMethod="scale";
oObj.innerText='Make Normal';
}
}
每次单击网页中的按钮，按钮上的显示文本都会发生变化，默认的显示文本为“Make Normal”。如果在显示“Make Normal”时单击按钮，就会通过：
oDiv.filters(0).sizingMethod="image";
oObj.innerText='Enlarge It';
以正常的尺寸来显示图像，并且更改按钮的显示文本为“Enlarge It”。
如果在显示“Enlarge It”时单击按钮，就会通过：
oDiv.filters(0).sizingMethod="scale";
oObj.innerText='Make Normal';
以图层的尺寸来显示图像，并且更改按钮的显示文本为“Make Normal”。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<SCRIPT>
var bToggle = 1
function fnToggle(oObj)
{
if (bToggle)
{
bToggle = 0;
oDiv.filters(0).sizingMethod="image";
oObj.innerText='Enlarge It';
}
else
{
bToggle = 1;
oDiv.filters(0).sizingMethod="scale";
oObj.innerText='Make Normal';
}
}
</SCRIPT>
<DIV id="oDiv"
style="position:relative; height:250px; width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/lige.jpg', sizingMethod='scale');" >
</DIV>
<BR>
<BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，就会按照图层的尺寸来缩放图像，初始画面如图4-8所示。
单击Make Normal按钮，就会以图像的实际尺寸正常显示图像，结果如图4-9所示。
图4-8 初始画面 图4-9 缩放图像
如果修改oDiv.filters(0).sizingMethod="scale"语句中的scale为crop，就可以对图像进行切割显示。
E- mail:
本站ICP备案号：
