位置：首页>> 网络编程>> JavaScript>> 特效代码:弹出一个淡入淡出的提示框

特效代码:弹出一个淡入淡出的提示框

　　发布时间：2008-05-22 17:11:00　

标签：提示,特效,RSS,firefox

昨天在得写“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”属性才行，需要注意的也就这么多吧，下面我实现了两个大家经常会用到的效果：

一、手动去控制一个元素的出现与消失

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <SCRIPT> var intTimeStep=20; var isIe=(window.ActiveXObject)?true:false; var intAlphaStep=(isIe)?5:0.05; var curSObj=null; var curOpacity=null; function startObjVisible(objId) { curSObj=document.getElementById(objId); setObjState(); } function setObjState(evTarget) { if (curSObj.style.display==""){curOpacity=1;setObjClose();} else{ if(isIe) { curSObj.style.cssText='DISPLAY: none;Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;'; curSObj.filters.alpha.opacity=0; }else { curSObj.style.opacity=0 } curSObj.style.display=''; 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://www.chinaz.com/upimg/litimg/080522/013550264J3.gif">测试效果<img src="http://www.chinaz.com/upimg/litimg/080522/013550264J3.gif"></DIV></td></tr> </table> </body> </html>

二、弹出一个淡入淡出的提示框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>特效代码:弹出一个淡入淡出的提示框</title><SCRIPT>var intTimeStep=20;var isIe=(window.ActiveXObject)?true:false;var intAlphaStep=(isIe)?5:0.05;var curSObj=null;var curOpacity=null;var stopTime=0;function startObjMessage(objId){curSObj=document.getElementById(objId);if(isIe){curSObj.style.cssText='DISPLAY: none; Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;';}setMessage();}function setMessage(){if(isIe){curSObj.filters.alpha.opacity=0;}else{curOpacity=0;curSObj.style.opacity=0}curSObj.style.display='';setMessageShow();}function setMessageShow(){if(isIe){curSObj.filters.alpha.opacity+=intAlphaStep;if (curSObj.filters.alpha.opacity<100) {setTimeout('setMessageShow()',intTimeStep);}else{stopTime+=10;if(stopTime<500){setTimeout('setMessageShow()',intTimeStep);}else{stopTime=0;setMessageClose();}}}else{curOpacity+=intAlphaStep;curSObj.style.opacity =curOpacity;if (curOpacity<1) {setTimeout('setMessageShow()',intTimeStep);}else{stopTime+=10;if(stopTime<200){setTimeout('setMessageShow()',intTimeStep);}else{stopTime=0;setMessageClose();}}}}function setMessageClose(){if(isIe){curSObj.filters.alpha.opacity-=intAlphaStep;if (curSObj.filters.alpha.opacity>0) {setTimeout('setMessageClose()',intTimeStep);}else {curSObj.style.display='none';}}else{curOpacity-=intAlphaStep;if (curOpacity>0) {curSObj.style.opacity =curOpacity;setTimeout('setMessageClose()',intTimeStep);}else {curSObj.style.display='none';}}}</SCRIPT></head><body><table width=80％ ID="Table1"><tr><td>效果二：淡入淡出的弹出消息<br><input type=button onclick="startObjMessage('objDiv')" value="点击弹出消息" ID="Button1" NAME="Button1"></td></tr><tr><td><DIV id="objDiv" style="DISPLAY: none; Z-INDEX: 1; POSITION: absolute; "><img src="http://www.chinaz.com/upimg/litimg/080522/013550264J3.gif">测试效果<img src="http://www.chinaz.com/upimg/litimg/080522/013550264J3.gif"></DIV></td></tr></table></body></html>

投稿

特效代码:弹出一个淡入淡出的提示框

猜你喜欢