建站极客
网络编程 JavaScript 正文
用javascript实现的图片马赛克后显示并切换加文字功能
所属分类:
网络编程 / JavaScript
阅读数:
1656
收藏 0
赞 0
分享
<script language="JavaScript1.1"> var slidespeed=3000 var slideimages=new Array("https://cdn.zhanzhang360.cn/imgupload/001115/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg") var texts = new Array ("11111","22222","33333","44444","55555") var texts1 = new Array ("11111","22222","33333","44444","55555") var texts2 = new Array ("11111","22222","33333","44444","55555") var imageholder=new Array() var ie55=window.createPopup for (i=0;i<slideimages.length;i++){ imageholder[i]=new Image(); imageholder[i].src=slideimages[i]; } function gotoshow(){ window.location=slidelinks[whichlink] } //--> </script> <table width="200" border="1"> <tr> <td colspan="2" rowspan="3"><img src="https://cdn.zhanzhang360.cn/imgupload/001115/2482150_1_7.jpg" name="slide" border=0 width=200px height="200px" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></td> <td><div id=text> </div></td> </tr> <tr> <td><div id=text1> </div> </td> </tr> <tr> <td><div id=text2> </div> </td> </tr> </table> <div id=aa></div> <script language="JavaScript1.1"> <!-- var whichlink=0 var whichimage=0 var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0 function slideit(){ if (!document.images) return whichlink=whichimage; if(whichimage<slideimages.length){ whichimage=whichimage+1; }else{whichimage=1} /* whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0; whichimage=(whichimage>=slideimages.length)?whichimage=slideimages.length:whichimage; */ if (ie55) document.images.slide.filters[0].apply() var thesrc=(whichimage-1)>0?thesrc=whichimage-1:0 document.images.slide.src=imageholder[thesrc].src if (ie55) document.images.slide.filters[0].play() text.innerText=(whichimage<slideimages.length+1)? texts[whichimage-1] : 0; aa.innerText= whichimage; text1.innerText=(whichimage<slideimages.length+1)? texts1[whichimage-1] : 0; text2.innerText=(whichimage<slideimages.length+1)? texts2[whichimage-1] : 0; setTimeout("slideit()",slidespeed+pixeldelay) } slideit() //--> </script> <html> <body> </body> </html>
Node.js事件的正确使用方法 这篇文章主要给大家介绍了关于Node.js事件的正确使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Node.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
评论 0
收藏 0
赞 0
分享
微信小程序自定义导航栏实例代码 这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
评论 0
收藏 0
赞 0
分享
js字符串处理之绝妙的代码 这篇文章主要介绍了js字符串处理之绝妙的代码,包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串,有时候需要对字符进行处理的时候可以用得到
评论 0
收藏 0
赞 0
分享
vue设计一个倒计时秒杀的组件详解 这篇文章主要介绍了vue设计一个倒计时秒杀的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
详解服务端预渲染之Nuxt(介绍篇) 这篇文章主要介绍了详解服务端预渲染之Nuxt(介绍篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
详解vue中this.$emit()的返回值是什么 这篇文章主要介绍了详解vue中this.$emit()的返回值是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
vue自定义指令directive的使用方法 这篇文章主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
查看更多