巧用CSS滤镜制作绚丽图片播放效果
巧用CSS滤镜制作绚丽图片播放效果
发布时间:2016-12-27 来源:查字典编辑
摘要:CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效...

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代码中的图片。

注意,页面地址必须与图片张数相对应。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类