巧用CSS濾鏡制作絢麗圖片播放效果
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:26:39 作者：佚名 
我要評論
我要評論CSS中有revealTrans濾鏡在網(wǎng)頁中制作特效非常有用處。這次，我們準備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。
實現(xiàn)思路：使用revealTrans濾鏡制作出超弦圖片播放的效果，并每張圖片有各自的鏈接地址。
制作方法：
1、在<head>中插入JS
CSS中有revealTrans濾鏡在網(wǎng)頁中制作特效非常有用處。這次，我們準備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。
實現(xiàn)思路：使用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=連接地址"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>
其中：各鏈接地址相對應(yīng)<head>中插入的JS代碼中的圖片。
注意，頁面地址必須與圖片張數(shù)相對應(yīng)。
實現(xiàn)思路：使用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=連接地址"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>
其中：各鏈接地址相對應(yīng)<head>中插入的JS代碼中的圖片。
注意，頁面地址必須與圖片張數(shù)相對應(yīng)。
相關(guān)文章
這篇文章主要介紹了CSS 控制動畫播放與暫停的小技巧(非常實用),本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友2020-07-21- 這篇文章主要介紹了用CSS播放聲音的幾種技巧方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-04-17
通過CSS的動畫屬性animation可以實現(xiàn)音頻播放時的動畫效果，同時配合JS操作動畫的animation-play-state屬性，來控制動畫的暫停和播放，本文重點介紹CSS實現(xiàn)音頻播放時柱狀2023-10-10
