本实例演示如何在网页上使用blendTrans滤镜，以淡入淡出的效果来显示图像。
向网页上添加一个IMG对象和两个按钮，设计完成的网页界面如图4-22所示。
图4-22 设计完成的网页
单击Fade Image Out按钮可以使图像慢慢淡出，按钮的onclick事件映射到fadeOut函数，fadeOut函数的代码如下：
function fadeOut(obj)
{
obj.style.filter="blendTrans(duration=2)";
// Make sure filter is not playing.
if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 2))
{
obj.filters.blendTrans.Apply();
obj.style.visibility="hidden";
obj.filters.blendTrans.Play();
}
}
单击Fade Image Out按钮时，首先设置图像的滤镜为blendTrans，并且完成转换的时间为2秒。如果此时图像处于可见状态，并且没有播放滤镜，那么通过obj.style.visibility= "hidden"语句设置图像处于隐藏状态，然后通过obj.filters.blendTrans.Play()语句播放滤镜效果，使图像慢慢淡出。
单击Fade Image In按钮可以使图像慢慢淡入，代码的实现原理与Fade Image Out按钮基本一致。
</HTML>
<HEAD>
<TITLE>BlendTrans Transition</TITLE>
<SCRIPT>
<!--
function fadeOut(obj)
{
obj.style.filter="blendTrans(duration=2)";
// Make sure filter is not playing.
if ((obj.visibility != "hidden") &&
(obj.filters.blendTrans.status != 2))
{
obj.filters.blendTrans.Apply();
obj.style.visibility="hidden";
obj.filters.blendTrans.Play();
}
}
function fadeIn(obj)
{
obj.style.filter="blendTrans(duration=2)";
// Make sure filter is not playing.
if ((obj.visibility != "visible") &&
(obj.filters.blendTrans.status != 2))
{
obj.filters.blendTrans.Apply();
obj.style.visibility="visible";
obj.filters.blendTrans.Play();
}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<IMG id=oImg src="images/sphere.jpg"></IMG>
<P>
<BUTTON onclick="fadeOut(oImg)">Fade Image Out</BUTTON>
<BUTTON onclick="fadeIn(oImg)">Fade Image In</BUTTON>
</P>
<HR>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-23所示。
图4-23 初始画面
单击Fade Image Out按钮可以使图像慢慢淡出、单击Fade Image In按钮可以使图像慢慢淡入，结果如图4-24所示。
图4-24 blendTrans滤镜实现图像的淡入淡出
E- mail:
本站ICP备案号：
