彈出一個淡入淡出的提示框,且自動消失

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>點擊按鈕彈出一個淡入淡出的提示框,且自動消失丨芯晴網頁特效丨CsrCode.Cn</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 οnclick="startObjMessage('objDiv')" value="點擊彈出消息" ID="Button1" NAME="Button1"></td>
    </tr>
    <tr><td><DIV id="objDiv" style="DISPLAY: none; Z-INDEX: 1; POSITION: absolute; ">
    <img src="/html/txdm_2/images/20100922/1_122131.gif">測試效果<img src="/html/txdm_2/images/20100922/1_122131.gif"></DIV></td></tr>
    </table>
    </body>
    </html>
    <p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>丨CsrCode.Cn 收集於互聯網,只爲興趣與學習交流,不作商業用途。</p>
    

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章