本实例演示如何在网页上以棋盘效果来显示图像，并且用户可以选择开关的方式。
向网页上添加一个IMG对象、一个按钮和四个下拉列表框，设计完成的网页界面如图4-33所示。
图4-33 设计完成的网页
设置IMG对象的name为filterIMG，将图像的style属性中的filter设置为DXImageTransform.Microsoft.Checkerboard：
<IMG style="filter:
progid:DXImageTransform.Microsoft.Checkerboard(
Direction=right,SquaresX=12,
SquaresY=8, Duration=1)"
src="images/chart.gif"
name=filterIMG >
图层中的棋盘是由各个下拉列表框的onchange事件控制，下面以Duration对应的下拉列表框为例来说明：
<B> Duration:</B>
<SELECT onchange="filterIMG.filters.item(0).duration=
this.options[this.selectedIndex].value">
<OPTION value="1" selected>1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
</SELECT>
在Duration下拉列表框中包含有1、2、3和4这四个列表项，当用户在网页上改变Duration下拉列表框的选项时，就会激活onchange事件，通过语句filterIMG.filters.item(0). duration=this.options[this.selectedIndex].value语句设置图像的棋盘效果的完成时间为在列表框中选中的秒数。
单击网页上的按钮可以播放棋盘效果，而按钮的onclick事件映射到fnToggle函数，fnToggle函数的关键代码如下：
filterIMG.filters[0].Apply();
if (bTranState==0)
{
bTranState = 1;
filterIMG.style.visibility="hidden";
}
else
……
filterIMG.filters[0].Play();
每次单击网页中的按钮，bTranState变量都会发生变化，默认的值为0。如果在bTranState变量为0时单击按钮，就会通过filterIMG.style.visibility="hidden"语句设置图像不可见，执行filterIMG.filters[0].Play()语句后就会以棋盘效果来隐藏图像。
<HTML>
<HEAD>
<TITLE>Checkerboard Transition</TITLE>
<SCRIPT>
var bTranState = 0;
function fnToggle()
{
filterIMG.filters[0].Apply();
if (bTranState==0)
{
bTranState = 1;
filterIMG.style.visibility="hidden";
}
else
{
bTranState = 0;
filterIMG.style.visibility="visible";
}
filterIMG.filters[0].Play();
}
</SCRIPT>
</HEAD>
<BODY>
<B> squaresX:</B>
<SELECT onchange="filterIMG.filters.item(0).squaresX=
this.options[this.selectedIndex].value">
<OPTION value="2">2</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="8">8</OPTION>
<OPTION value="12" selected>12</OPTION>
</SELECT>
<B> squaresY:</B>
<SELECT onchange="filterIMG.filters.item(0).squaresY=
this.options[this.selectedIndex].value">
<OPTION value="2">2</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="8" selected>8</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
<BR><BR>
<B> Duration:</B>
<SELECT onchange="filterIMG.filters.item(0).duration=
this.options[this.selectedIndex].value">
<OPTION value="1" selected>1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
</SELECT>
<B> Direction:</B>
<SELECT onchange="filterIMG.filters.item(0).direction=
this.options[this.selectedIndex].value">
<OPTION value="up">Up</OPTION>
<OPTION value="down">Down</OPTION>
<OPTION value="left">Left</OPTION>
<OPTION value="right" selected>Right</OPTION>
</SELECT>
<BR><BR><BR>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<DIV></DIV>
<IMG style="filter:
progid:DXImageTransform.Microsoft.Checkerboard(
Direction=right,SquaresX=12,
SquaresY=8, Duration=1)"
src="images/chart.gif"
name=filterIMG >
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-34所示。
图4-34 初始画面
选择squaresX为8、squaresY为8、Duration为2、Direction为Up，单击Toggle Transition按钮，结果如图4-35所示。
图4-35 棋盘效果显示图像
E- mail:
本站ICP备案号：
