巧用CSS滤镜制作绚丽图片播放效果
发布时间：2020-09-22 13:02:21 所属栏目：系统 来源：网络整理
导读：CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路：使用revealTrans滤镜
|
CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。 制作方法： 1、在<head>中插入JS代码： <SCRIPTlanguage=JavaScript1.2> functionreapply(){ setTimeout("slideit()",800) returntrue } window.onerror=reapply </SCRIPT> <SCRIPTlanguage=JavaScript1.1> <!-- //preloadimages varimage1=newImage() image1.src=图片地址" varimage2=newImage() image2.src=图片地址" varimage3=newImage() image3.src=图片地址" varimage4=newImage() image4.src=图片地址" varimage5=newImage() image5.src=图片地址" varimage6=newImage() image6.src=图片地址" varimage7=newImage() image7.src=图片地址" varimage8=newImage() image8.src=图片地址" varimage9=newImage() image9.src=图片地址" //--> </SCRIPT> 其中：images/图片地址为显示图片的路径，可按实际情况修改。 2、在<body>中插入代码：onload=slideit() 3、在页面中插入图片。 并在图片<img>中插入：style="FILTER: revealTrans(Duration=2, Transition=23)"，并命名为：name=slide 完整代码：<img src=http://www.jb51.net/css/连接地址"images/图片地址" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide> 4、给图片加超链接：<a href=http://www.jb51.net/css/"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代码中的图片。 注意，页面地址必须与图片张数相对应。 （编辑：上饶站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
