百叶窗效果显示图像

本实例演示如何在网页上以百叶窗效果来显示图像，并且用户可以选择开关的方式。

向网页上添加四个DIV层，其中右侧有一个图层作为下拉列表框和按钮的容器，左侧有一个图层作为另外两个相互重叠、显示图像和文字信息的图层的容器，设计完成的网页界面如图4-25所示。

图4-25 设计完成的网页

设置左侧DIV图层的id为oTransContainer，将图层的style属性中的filter设置为DXImageTransform.Microsoft.Blinds，oTransContainer图层上的两个图层分别用于显示图像images/smallmouse.jpg、文字“Product Details”、图像images/smallanichart.gif和文字“Market Data”：

<DIV id="oTransContainer"

style="filter: progid:DXImageTransform.Microsoft.Blinds

(bands=2, direction='RIGHT');

position:absolute; top:40; left:10;

width:240px; height:180px; ">

<DIV id="oDIV1" style="position:absolute; top:0; left:0; width:240px;

height: 180px; background: #666666; padding:10px;

font-size:15pt; border:2px solid black; color:white">

<IMG src="images/smallmouse.jpg"

style="position:absolute; top:110; left:145;">

Product Details

</DIV>

<DIV id="oDIV2" style="visibility:hidden; position:absolute; top:0;

left:0;

width:240px; height: 180px; color:black;

background: gold; padding:10px; font-size:15pt;

font-family:verdana; border:2px solid black; ">

<IMG src="images/smallanichart.gif"

style="position:absolute; top:50; left:15">

Market Data

</DIV>

图层中的百叶窗效果是由各个下拉列表框的onchange事件控制，下面以Direction对应的下拉列表框为例来说明：

<B>Direction:</B>

<SELECT onchange="oTransContainer.filters.item(

'DXImageTransform.Microsoft.Blinds').direction=

this.options[this.selectedIndex].value">

<OPTION value="RIGHT" SELECTED>Right</OPTION>

</SELECT>

在Direction下拉列表框中包含有UP、DOWN、LEFT和RIGHT四个列表项，当用户在网页上改变Direction下拉列表框的选项时，就会激活onchange事件，通过语句oTransContainer.filters.item('DXImageTransform.Microsoft.Blinds').direction=this.options[this. selectedIndex].value语句设置oTransContainer图层的百叶窗效果的运动方向为在列表框中选中的方向。

单击网页上的按钮可以播放开关门效果，而按钮的onclick事件映射到fnToggle函数，fnToggle函数的关键代码如下。

oTransContainer.filters[0].Apply();

if (bTranState=='0')

{

bTranState = 1;

oDIV2.style.visibility="visible";

oDIV1.style.visibility="hidden";

}

else

……

oTransContainer.filters[0].Play();

每次单击网页中的按钮，bTranState变量都会发生变化，默认的值为0。如果在bTranState变量为0时单击按钮，就会通过：

oDIV2.style.visibility="visible";

oDIV1.style.visibility="hidden";

设置oDIV2图层可见，oDIV1图层不可见，执行oTransContainer.filters[0].Play()语句后就会以百叶窗的效果来隐藏oDIV1图层，显示oDIV2图层。

<HTML>

<HEAD>

<TITLE>Blinds Transition</TITLE>

var bTranState = 0;

function fnToggle()

{

oTransContainer.filters[0].Apply();

if (bTranState=='0')

{

bTranState = 1;

oDIV2.style.visibility="visible";

oDIV1.style.visibility="hidden";

}

else

{

bTranState = 0;

oDIV2.style.visibility="hidden";

oDIV1.style.visibility="visible";

}

oTransContainer.filters[0].Play();

}

</SCRIPT>

</HEAD>

<BR>

<B>Bands:</B>

<SELECT onchange="oTransContainer.filters.item(

'DXImageTransform.Microsoft.Blinds').bands=

this.options[this.selectedIndex].value">

</SELECT>

<B>Direction:</B>

<SELECT onchange="oTransContainer.filters.item(

'DXImageTransform.Microsoft.Blinds').direction=

this.options[this.selectedIndex].value">

<OPTION value="RIGHT" SELECTED>Right</OPTION>

</SELECT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

</DIV>

<DIV id="oTransContainer"

style="filter: progid:DXImageTransform.Microsoft.Blinds

(bands=2, direction='RIGHT');

position:absolute; top:40; left:10;

width:240px; height:180px; ">

<DIV id="oDIV1"

style="position:absolute; top:0; left:0; width:240px;

height: 180px; background: #666666; padding:10px;

font-size:15pt; border:2px solid black; color:white">

<IMG src="images/smallmouse.jpg"

style="position:absolute; top:110; left:145;">

Product Details

</DIV>

<DIV id="oDIV2"

style="visibility:hidden; position:absolute; top:0; left:0;

width:240px; height: 180px; color:black; background: gold;

padding:10px; font-size:15pt; font-family:verdana;

border:2px solid black; ">

<IMG src="images/smallanichart.gif" style="position:absolute;

top:50; left:15">

Market Data

</DIV>

</BODY>

</HTML>

保存文件，在浏览器中浏览网页文件，初始画面如图4-26所示。

选择Bands为6，Direction为Right，单击Toggle Transition按钮，结果如图4-27所示。

选择Bands为8，Direction为Up，单击Toggle Transition按钮，结果如图4-28所示。

图4-26 初始画面

图4-27 百叶窗效果显示图像之一

图4-28 百叶窗效果显示图像之二