巧用CSS濾鏡制作絢麗圖片播放效果_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
CSS中有revealTrans濾鏡在網頁中制作特效非常有用處。這次，我們預備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。
實現思路：使用revealTrans濾鏡制作出超弦圖片播放的效果，并每張圖片有各自的鏈接地址。
制作方法：
1、在<head>中插入JS代碼：
其中：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、加入代碼：
其中：各鏈接地址相對應<head>中插入的JS代碼中的圖片。
注重，頁面地址必須與圖片張數相對應。
實現思路：使用revealTrans濾鏡制作出超弦圖片播放的效果，并每張圖片有各自的鏈接地址。
制作方法：
1、在<head>中插入JS代碼：
| <SCRIPT language=JavaScript1.2> function reapply(){ setTimeout("slideit()",800) return true } window.onerror=reapply </SCRIPT> <SCRIPT language=JavaScript1.1> <!-- //preload images var image1=new Image() image1.src=圖片地址" var image2=new Image() image2.src=圖片地址" var image3=new Image() image3.src=圖片地址" var image4=new Image() image4.src=圖片地址" var image5=new Image() image5.src=圖片地址" var image6=new Image() image6.src=圖片地址" var image7=new Image() image7.src=圖片地址" var image8=new Image() image8.src=圖片地址" var image9=new Image() image9.src=圖片地址" //--> </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> <!-- ////change number of images below var number_of_images=9 //change speed below (in seconds) var speed=3 var step=1 var whichimage=1 function slideit(){ 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) } function slidelink(){ 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" else if (whichimage==9) top.location.href=圖片地址"/study.HTML" } </SCRIPT> |
其中：各鏈接地址相對應<head>中插入的JS代碼中的圖片。
注重，頁面地址必須與圖片張數相對應。
相關CSS教程：
- 相關鏈接：
- 教程說明：
CSS教程-巧用CSS濾鏡制作絢麗圖片播放效果
。