昨天在得写“RSS收藏”栏目展现的时候我让RSS的列表用弹出的形式展现了,开始是直接的控制 style.display 来做的,但是感觉有点生硬,后来我利用javascript写了一个淡入淡出的效果,感觉在视觉上要比原来舒服多了,由此也总结出一段客户端的javascript脚本,只需传入一个元素的ID,就能对其实现淡入淡出的效果了,经测试,在IE6及firefox下都通过了,下面给大家分享一下儿吧。
其实“淡入淡出”的效果无非是需要通过定时的改变元素的透明度来实现的,但这个透明度的无素属性在IE和firefox下写法是不同的(不知道什么时候“标准”才能真正成为标准)。ie下要用“.filters.alpha.opacity”来指定透明度,而在firefox下却变成了“.style.opacity”了,并且在使用中我发现在ie环境下你可以直接用“obj.filters.alpha.opacity=obj.filters.alpha.opacity+10”这样子的写法来直接更改元素的透明度,而firefox下却不行,它会报脚本错误,只能去更改一个变量的值,然后再去赋值给“.style.opacity”属性才行,需要注意的也就这么多吧,下面我实现了两个大家经常会用到的效果:
一、手动去控制一个元素的出现与消失
curOpacity=0;
setObjOpen();
}
}
function setObjOpen()
{
if(isIe)
{
curSObj.filters.alpha.opacity+=intAlphaStep;
if (curSObj.filters.alpha.opacity<100) setTimeout('setObjOpen()',intTimeStep);
}else{
curOpacity+=intAlphaStep;
curSObj.style.opacity =curOpacity;
if (curOpacity<1) setTimeout('setObjOpen()',intTimeStep);
}
}
function setObjClose()
{
if(isIe)
{
curSObj.filters.alpha.opacity-=intAlphaStep;
if (curSObj.filters.alpha.opacity>0) {
setTimeout('setObjClose()',intTimeStep);}
else {curSObj.style.display="none";}
}else{
curOpacity-=intAlphaStep;
if (curOpacity>0) {
curSObj.style.opacity =curOpacity;
setTimeout('setObjClose()',intTimeStep);}
else {curSObj.style.display='none';}
}
}
</SCRIPT>
</head>
<body>
<table width=80%><tr><td>效果一:手动控制展现或消失<br><input type=button onclick="startObjVisible('objDiv');if(this.value=='点击展现'){this.value='点击隐藏'}else{this.value='点击展现'}" value="点击展现"></td>
</tr>
<tr><td><DIV id="objDiv" style="DISPLAY: none;">
<img src="http://web.syku.net/UploadFiles_5065/200801/20080111104220745.gif">测试效果<img src="http://web.syku.net/UploadFiles_5065/200801/20080111104220745.gif"></DIV></td></tr>
</table>
</body>
</html>
在线演示效果如下:
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]