当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS代码实现图片的渐隐播放效果

JS代码实现图片的渐隐播放效果

2012/11/7 20:13:18作者:佚名来源:网络

移动端

【实例名称】

JS代码实现图片的渐隐播放效果

【实例描述】

单独实现一个图片的显示和隐藏比较容易,本例将介绍如何实现多个图片连续播放的效果,并在图片切换的时候使用逐渐消隐的特效。

【实例代码】

<HTML> <HEAD> <TITLE>图像的渐隐播放效果-学无忧(www.xue51.com)</title> <script language=javaScript> var strngth=1 var index_image=0 var imageSrc = new Array() imageSrc[0] ="logo1.gif" imageSrc[1] ="logo2.gif" imageSrc[2] ="logo1.gif" function showimage()   //显示图像 {     if(document.all) {     //创建一个带滤镜样式的img图像-注意显示的图像并不固定     if (strngth <=110) {     imagediv.innerHTML="<img style='filter:alpha(opacity="+strngth+")' src="+imageSrc[index_image]+" border=0>";     strngth=strngth+10     var timer=setTimeout("showimage()",100)    //每隔100豪秒就显示图像     }     else {     clearTimeout(timer)     var timer=setTimeout("hideimage()",1000)   //每隔1000豪秒就隐藏图像     }     }     //是Netscape浏览器时的特效实现方法     if(document.layers) {     clearTimeout(timer)     document.imagediv.document.write("<img src="+ imageSrc[index_image]+" border=0>")     document.close()     index_image++     if (index_image >= imageSrc.length) {index_image=0}     var timer=setTimeout("showimage()",2000)     } } function hideimage()  //隐藏图像 {     if (strngth >=-10) {     //设置图像逐渐消隐的滤镜效果-注意图像并不固定     imagediv.innerHTML="<img style='filter:alpha(opacity="+strngth+")' src="+imageSrc[index_image]+" border=0>";     strngth=strngth-10     var timer=setTimeout("hideimage()",100)  //每隔100豪秒就隐藏图像     }     else {     clearTimeout(timer)     index_image++     if (index_image >= imageSrc.length) {index_image=0}     strngth=1     var timer=setTimeout("showimage()",500) //每隔500豪秒就显示图像     } } </script> </HEAD> <body  onLoad="showimage()"> <div id="imagediv"  style="position:absolute;"></div> </body> </HTML>

 

【运行效果】

 图片的渐隐播放效果运行效果

【难点剖析】

本例的重点是滤镜结合定时器的使用。用滤镜“filter.alpha”实现图片的渐隐渐现,然后使用定时器“setTimeout”实现图片数组的调用。

【源码下载】

为了JS代码的准确性,请点击:图片的渐隐播放效果 进行本实例源码下载 

标签: 图片