日期:2014-05-18 浏览次数:20191 次
用鼠标点击按钮试试看,让图片淡入淡出的效果特效.
以下是HTML网页特效代码,点击运行按钮可查看效果: 以下是程序代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <a href="http://www.zj-blog.com/html/2007/04/200704181345253719.htm" target="_blank">http://www.zj-blog.com/html/2007/04/200704181345253719.htm</a> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>5454</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>效果一:手动控制展现或消失<br><input type=button onClick="startObjVisible('objDiv');if(this.value=='点击展现'){this.value='点击隐藏'}else{this.value='点击展现'}" value="点击展现"></td> </tr> <tr><td><DIV id="objDiv" style="DISPLAY: none;"> <img src="http://www.zj-blog.com/common/images/emot/Face_21.gif">测试效果<img src="http://www.zj-blog.com/common/images/emot/Face_21.gif"></DIV> <DIV id="MyDiv" style="DISPLAY:block;"><img src="http://www.zj-blog.com/common/images/emot/Face_21.gif">ddddddd<img src="http://www.zj-blog.com/common/images/emot/Face_21.gif"></DIV> </td></tr> </table> </body></font> <a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站,js.aiyiweb.com</a> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]