JS實現(xiàn)圖片的淡入淡出效果

2024-09-05 12:21:12

字體：大中小

供稿：網(wǎng)友

用JS算法實現(xiàn)圖片的淡入淡出效果，淡入淡出的強度用參數(shù)可以控制，比FLSAH更好用一些。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>圖片的淡入淡出效果</title> <SCRIPT> var intTimeStep=20; var isIe=(window.ActiveXObject)?true:false; var intAlphaStep=(isIe)?5:0.05; var curSObj=null; var myobj=null;var mypacity=null;var curOpacity=null; function startObjVisible(objId) { curSObj=document.getElementById(objId); setObjState(); } function setObjState(evTarget) { if (curSObj.style.display==""){curOpacity=1;mypacity=0;setObjClose();} else{ if(isIe) { curSObj.style.cssText='DISPLAY: none;Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;'; curSObj.filters.alpha.opacity=0; }else { curSObj.style.opacity=0 ;myobj.style.opacity=1;} curSObj.style.display=''; document.getElementById("MyDiv").style.display="none";curOpacity=0; mypacity=1;setObjOpen(); } } function setObjOpen() { if(isIe) { curSObj.filters.alpha.opacity+=intAlphaStep; if (curSObj.filters.alpha.opacity<100) setTimeout('setObjOpen()',intTimeStep); }else{ curOpacity+=intAlphaStep; curSObj.style.opacity =curOpacity; if (curOpacity<1) setTimeout('setObjOpen()',intTimeStep); } } function setObjClose() { if(isIe) { curSObj.filters.alpha.opacity-=intAlphaStep; if (curSObj.filters.alpha.opacity>0) { setTimeout('setObjClose()',intTimeStep);} else {curSObj.style.display="none";document.getElementById("MyDiv").style.display="block";} }else{ curOpacity-=intAlphaStep; if (curOpacity>0) { curSObj.style.opacity =curOpacity; setTimeout('setObjClose()',intTimeStep);} else {curSObj.style.display='none';document.getElementById("MyDiv").style.display="block";} } } </SCRIPT> </head> <body> <table width=80%><tr><td><input type=button onClick="startObjVisible('objDiv');if(this.value=='點擊展現(xiàn)'){this.value='點擊隱藏'}else{this.value='點擊展現(xiàn)'}" value="點擊展現(xiàn)"></td> </tr> <tr><td><div   class="iwvjtn8m0"   id="objDiv" style="DISPLAY: none;"> <img src="/d/file/p/2024/09-05/3827c0245b1f13da1b4ebc14f5de49ee.gif">效果怎么樣？<img src="/d/file/p/2024/09-05/3827c0245b1f13da1b4ebc14f5de49ee.gif"></DIV><div   class="iwvjtn8m0"   id="MyDiv" style="DISPLAY:block;"><img src="/d/file/p/2024/09-05/3827c0245b1f13da1b4ebc14f5de49ee.gif">文字也會跟著變喲！<img src="/d/file/p/2024/09-05/3827c0245b1f13da1b4ebc14f5de49ee.gif"></DIV></td></tr> </table> </body></html>

上一篇：左右切換鼠標可控的無縫圖片滾動代碼

下一篇：讓圖片左右移動的JS代碼