图片的渐显播放 - 中国WEB开发者网络 (http://www.webasp.net) -- 网页特效 (http://www.webasp.net/javascript/) --- 图片的渐显播放 (http://www.webasp.net/javascript/1/264.htm) |
| -- 发布日期: 2004-07-03 |
| <!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供! --> <!-- 要实现此效果需要 3 个步骤: --> <!-- 第 1 步: --> <!-- 把下面的代码加到<HEAD></HEAD>区域中: --> <script language=javaScript> <!--// sandra0 = new Image(); sandra0.src = "../images/webasp.net.1.jpg"; sandra1 = new Image(); sandra1.src = "../images/webasp.net.2.jpg"; sandra2 = new Image(); sandra2.src = "../images/webasp.net.3.jpg"; var i_strngth=1 var i_image=0 var imageurl = new Array() imageurl[0] ="../images/webasp.net.1.jpg" imageurl[1] ="../images/webasp.net.2.jpg" imageurl[2] ="../images/webasp.net.3.jpg" function showimage() { if(document.all) { if (i_strngth <=110) { testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>"; i_strngth=i_strngth+10 var timer=setTimeout("showimage()",100) } else { clearTimeout(timer) var timer=setTimeout("hideimage()",1000) } } if(document.layers) { clearTimeout(timer) document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>") document.close() i_image++ if (i_image >= imageurl.length) {i_image=0} var timer=setTimeout("showimage()",2000) } } function hideimage() { if (i_strngth >=-10) { testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>"; i_strngth=i_strngth-10 var timer=setTimeout("hideimage()",100) } else { clearTimeout(timer) i_image++ if (i_image >= imageurl.length) {i_image=0} i_strngth=1 var timer=setTimeout("showimage()",500) } } //--> </script> <!-- 第 2 步: --> <!-- 把<BODY>中的属性代码改为: --> <BODY onLoad="showimage()"> <!-- 第 3 步: --> <!-- 把下面的代码加到<BODY></BODY>区域中: --> <div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div> |
| webasp.net |