开关门效果显示图像

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

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

图4-10 设计完成的网页

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

<DIV id="oTransContainer"

style="filter: progid:DXImageTransform.Microsoft.barn(

orientation=horizontal, motion=out);

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

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

<DIV id="oDIV1"

style="position:absolute; top:0px; left:0px; 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:110px; left:145px;">

Product Details

</DIV>

<DIV id="oDIV2"

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

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

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

border:2px solid black; ">

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

top:50; left:15">

Market Data

</DIV>

图层中的开关门效果是由各个下拉列表框的onchange事件控制，下面以Motion对应的下拉列表框为例来说明：

<B>Motion:</B>

<SELECT onchange="oTransContainer.filters.item(0).motion=

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

</SELECT>

在Motion下拉列表框中包含有In和Out两个列表项，当用户在网页上改变Motion下拉列表框的选项时，就会激活onchange事件，通过oTransContainer.filters.item(0).motion =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";

}

……

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>Barn Filter</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>

<B> Orientation:</B>

<SELECT onchange="oTransContainer.filters.item(0).orientation=

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

<OPTION value="horizontal">Horizontal</OPTION>

<OPTION value="vertical">Vertical</OPTION>

</SELECT>

<B>Motion:</B>

<SELECT onchange="oTransContainer.filters.item(0).motion=

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

</SELECT>

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

</DIV>

<DIV id="oTransContainer"

style="filter: progid:DXImageTransform.Microsoft.barn(

orientation=horizontal, motion=out);

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

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

<DIV id="oDIV1"

style="position:absolute; top:0px; left:0px; 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:110px; left:145px;">

Product Details

</DIV>

<DIV id="oDIV2"

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

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

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

border:2px solid black; ">

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

top:50; left:15">

Market Data

</DIV>

</BODY>

</HTML>

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

图4-11 初始画面

选择Orientation为Horizontal，Motion为In，单击Toggle Transition按钮，结果如图4-12所示。

图4-12 开关门效果显示图像之一

选择Orientation为Vertical，Motion为Out，单击Toggle Transition按钮，结果如图4-13所示。

图4-13 开关门效果显示图像之二