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

当前位置: 首页 > 图文教程 > 网页特效 > 图片特效 > 特效代码:弹出一个淡入淡出的提示框

图片特效: 网站常用的一种JS的图片幻灯片特效代码; 不间断连续向上滚动的图片特效; 网页左右浮动广告特效代码; 网页上部图片规定时间消失的特效; 网页特定区域连续滚动的图片特效; 文字和图片同时变换的网页特效; 符合网站标准的图片切换特效(天极软件); 百度联盟中的一个不错的图片切换特效; 刷新一次显示不同图片的特效代码; 强制网页图片自适应大小的网页特效代码; MSN女性频道好看的缓动超酷图片特效; 新浪女性频道图片切换特效; 土豆网首页轮换图片特效代码; 独具个性的网页相册; 鼠标感应的网页图片展示特效; 鼠标指向图片在图片上面出现文字提示; 鼠标指向网页图片时图片周围显示虚线框; 网页图片放大预览网页特效代码; JS实现模拟FLASH幻灯片图片切换网页特效; 网页图片旋转的网页特效代码

No. « 1 2 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-13 浏览: 426 ::

收藏到网摘: n/a

淡入淡出效果的图片提示特效代码无

昨天在得写“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; 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="/upload/tech/20091013/20091013013816_d2ddea18f00665ce8623e36bd4e3c7c5.gif">测试效果<img src="/upload/tech/20091013/20091013013816_d2ddea18f00665ce8623e36bd4e3c7c5.gif"></DIV></td></tr> </table> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

淡入淡出效果的图片提示特效代码无

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

评论 (0) All

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