本实例演示如何在网页上以淡入(渐渐清晰)和淡出(渐渐消失)的效果显示文本。
向网页上添加一个文本框、两个按钮和一个DIV层，如图1-1所示。
图1-1 设计完成的网页
在</HEAD>标记前添加一个自定义函数Draw，调用该函数实现淡入淡出效果：
function Draw(text)
{
if (document.all)
{
content.filters[0].apply()
content.innerHTML = "<SPAN style='color:FF0000;font-size:50pt;"+
"filter: revealTrans(Transition=12, Duration=3)'>"+
text+
"</SPAN>"
content.filters[0].play()
}
}
函数Draw有一个参数text，其中存储了在层中以淡入效果显示的文本，如果该参数为空字符串，那么就会以淡出效果消除在当前层中显示的文本。
<HTML>
<HEAD>
<META name="GENERATOR" content=“Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT>
function Draw(text)
{
if (document.all)
{
content.filters[0].apply()
content.innerHTML = "<SPAN style='color:FF0000;font-size:40pt;"+
"filter: revealTrans(Transition=12, Duration=3)'>"+
text+
"</SPAN>"
content.filters[0].play()
}
}
</SCRIPT>
<SCRIPT id=clientEventHandlersJS language=javascript>
<!--
function Button1_onclick()
{
Draw(Input1.value)
}
function Button2_onclick()
{
Draw("")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<DIV id=content
style="filter:revealTrans(Transition=12,Duration=2);
left: 21px; width: 371px;
top: 118px; height: 131px;
position: absolute; text-align: center">
</DIV>
<P>
<INPUT id=Input1 style="width: 164px; height: 22px" size=21>
</P>
<P>
<INPUT id=Button1 type=button
name=Button1
value=淡入效果
language=javascript
onclick="return Button1_onclick()">
<INPUT id=Button2 type=button
value=淡出效果
name=Button2
language=javascript
onclick="return Button2_onclick()">
</P>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图1-2所示。
图1-2 淡入淡出效果的初始画面
在文本框中输入文本，单击“淡入效果”按钮，淡入过程的画面结果如图1-3所示。
图1-3 淡入效果
单击“淡出效果”按钮，就会以淡出的效果清除文本
E- mail:
本站ICP备案号：
