巧用CSS滤镜制作绚丽图片播放效果

CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。　　实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。　　制作方法：　　1、在<head>中插入JS代码： <SCRIPTlanguage=JavaScript1.2> functionreapply(){ setTimeout("slideit()",800) returntrue } window.onerror=reapply </SCRIPT> <SCRIPTlanguage=JavaScript1.1>  </SCRIPT> 　　其中：images/图片地址为显示图片的路径，可按实际情况修改。　　2、在<body>中插入代码：onload=slideit()　　3、在页面中插入图片。并在图片<img>中插入：style="FILTER: revealTrans(Duration=2, Transition=23)"，并命名为：name=slide　　完整代码：<img src=连接地址"images/图片地址" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>　　4、给图片加超链接：<a href="JavaScript:slidelink()">　　5、加入代码： <SCRIPT> <!-- ////changenumberofimagesbelow varnumber_of_images=9 //changespeedbelow(inseconds) varspeed=3 varstep=1 varwhichimage=1 functionslideit(){ if(!document.images) return if(document.all) slide.filters.item(0).Apply() document.images.slide.src=eval("image" step ".src") if(document.all) slide.filters.item(0).Play() whichimage=step if(step<number_of_images) step else step=1 if(document.all) setTimeout("slideit()",speed*1000 3000) else setTimeout("slideit()",speed*1000) } functionslidelink(){ if(whichimage==1) top.location.href=图片地址"/index.HTML" if(whichimage==2) top.location.href=图片地址"/news.HTML" if(whichimage==3) top.location.href=图片地址"/game.HTML" if(whichimage==4) top.location.href=图片地址"/music.HTML" if(whichimage==5) top.location.href=图片地址"/sport.HTML" if(whichimage==6) top.location.href=图片地址"/radio.HTML" if(whichimage==7) top.location.href=图片地址"/travel.HTML" if(whichimage==8) top.location.href=图片地址"/card.JSP" elseif(whichimage==9) top.location.href=图片地址"/study.HTML" } </SCRIPT> 　　其中：各链接地址相对应<head>中插入的JS代码中的图片。　　注意，页面地址必须与图片张数相对应。

　　推荐阅读

　　从三方面加速CSS样式作用网页速度

最近学校的网络越来越慢了，浏览网页时经常出现裸奔的现象，于是我就想如何可以尽量避免这一问题，现把自己的一些思路写出来，以供大家参考：在我们无法更换服务器或提高服务器速度的情况下，要想让我们的页面>>>详细阅读

本文标题：巧用CSS滤镜制作绚丽图片播放效果

地址：http://www.17bianji.com/kaifa2/CSS/17246.html

1/2 1