如何利用javascript寫(xiě)“淡入淡出”效果的提示框[轉(zhuǎn)]
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
昨天在得寫(xiě)“RSS收藏”欄目展現(xiàn)的時(shí)候我讓RSS的列表用彈出的形式展現(xiàn)了，開(kāi)始是直接的控制 style.display 來(lái)做的，但是感覺(jué)有點(diǎn)生硬，后來(lái)我利用javascript寫(xiě)了一個(gè)淡入淡出的效果，感覺(jué)在視覺(jué)上要比原來(lái)舒服多了，由此也總結(jié)出一段客戶端的javascript腳本，只需傳入一個(gè)元素的ID，就能對(duì)其實(shí)現(xiàn)淡入淡出的效果了，經(jīng)測(cè)試，在IE6及firefox下都通過(guò)了，下面給大家分享一下兒吧。 其實(shí)“淡入淡出”的效果無(wú)非是需要通過(guò)定時(shí)的改變?cè)氐耐该鞫葋?lái)實(shí)現(xiàn)的，但這個(gè)透明度的無(wú)素屬性在IE和firefox下寫(xiě)法是不同的（不知道什么時(shí)候“標(biāo)準(zhǔn)”才能真正成為標(biāo)準(zhǔn)）。ie下要用“.filters.alpha.opacity”來(lái)指定透明度，而在firefox下卻變成了“.style.opacity”了，并且在使用中我發(fā)現(xiàn)在ie環(huán)境下你可以直接用“obj.filters.alpha.opacity=obj.filters.alpha.opacity+10”這樣子的寫(xiě)法來(lái)直接更改元素的透明度，而firefox下卻不行，它會(huì)報(bào)腳本錯(cuò)誤，只能去更改一個(gè)變量的值，然后再去賦值給“.style.opacity”屬性才行，需要注意的也就這么多吧，下面我實(shí)現(xiàn)了兩個(gè)大家經(jīng)常會(huì)用到的效果： 二、彈出一個(gè)淡入淡出的提示框 程序代碼 <!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="點(diǎn)擊彈出消息" ID="Button1" NAME="Button1"></td> </tr> <tr><td><DIV id="objDiv" style="DISPLAY: none; Z-INDEX: 1; POSITION: absolute; "> <img src="http://www.zj-blog.com/common/images/emot/Face_21.gif">測(cè)試效果<img src="http://www.zj-blog.com/common/images/emot/Face_21.gif"></DIV></td></tr> </table> </body> </html> 該文章在 2010/8/18 1:25:28 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
