我是靠谱客的博主 俊秀枫叶,最近开发中收集的这篇文章主要介绍弹出一个淡入淡出的提示框,且自动消失,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>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>

<script type="text/javascript">

window.setInterval(function(){

startObjMessage('objDiv')

},3000)

</script>

</head>

<body>

<span>这里显示结果!静等3秒!</span>

<DIV id="objDiv" style="DISPLAY: none; Z-INDEX: 1; POSITION: absolute; ">

气不气!打我呀!略略略........

</DIV>

</body>

</html>

 

最后

以上就是俊秀枫叶为你收集整理的弹出一个淡入淡出的提示框,且自动消失的全部内容,希望文章能够帮你解决弹出一个淡入淡出的提示框,且自动消失所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(50)

评论列表共有 0 条评论

立即
投稿
返回
顶部