加入收藏 | 设为首页 | 会员中心 | 我要投稿 | RSS
您当前的位置:首页 > 网页特效 > 图片特效
广告特效 | 图片特效 | 文字特效 | 按钮特效 | 鼠标特效 | 窗口特效 | 时间特效 |
菜单导航 | 状态栏特效 | 标题栏特效 |
468x15

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

时间:2013-10-17 22:09:38  来源:  作者:

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

<!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="/edu/img/js/200909/3.jpg">测试效果<img src="/edu/img/js/200909/3.jpg"></DIV></td></tr></table></body></html>



来顶一下
返回首页
返回首页
赞助商链接广告
推荐下载
  • jQuery鼠标拖动图片拖动动画特效代码
  • 网页特效图片渐变效果
  • 网页特效图形显示特效
  • 网页特效特殊的图像显示
  • 网页特效图片自动切换
  • 水韵效果特效代码
  • 不停闪烁的图片
  • 赞助商链接广告
    最后更新
  • js制作当前图片高亮和图片放大聚焦效果
  • js智能缩放点击图片放大预览代码
  • CSS3鼠标经过图片旋转放大特效
  • css3 filter滤镜属性制作的图片美化特效
  • jQuery图片堆叠左右切换代码
  • jQuery响应式图片切换无缝切换代码
  • jQuery鼠标拖动图片拖动动画特效代码
  • 图片放大预览网页特效代码
  • 网页相册特效代码
  • js图片自动切换代码
  • 赞助商链接广告