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

在老江湖面前,表现能力是一件可笑的事情,你只需要就事论事就行了。当你做成功一件事,千万不好等待着享受荣誉,就应再做那些需要的事。
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=连接地址"images/图片地址" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>
  4、给图片加超链接:<a rel="nofollow noopener noreferrer" 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.rel="nofollow noopener noreferrer" href=图片地址"/index.HTML"
if(whichimage==2)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/news.HTML"
if(whichimage==3)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/game.HTML"
if(whichimage==4)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/music.HTML"
if(whichimage==5)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/sport.HTML"
if(whichimage==6)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/radio.HTML"
if(whichimage==7)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/travel.HTML"
if(whichimage==8)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/card.JSP"
elseif(whichimage==9)
top.location.rel="nofollow noopener noreferrer" href=图片地址"/study.HTML"
}
</SCRIPT>
  其中:各链接地址相对应<head>中插入的JS代码中的图片。
  注意,页面地址必须与图片张数相对应。

本文巧用CSS滤镜制作绚丽图片播放效果到此结束。冬天的河干涸了,我相信,春水还会来临,那时白帆就是我心中的偶像;风中的树叶凋零了,我相信,泥土里的梦将在枝头开花结果。谢谢大家支持!

您可能有感兴趣的文章
巧用CSS3的calc()宽度计算做响应模式布局的方法

巧用box-shadow如何实现布局区域间隔变色

巧用隐藏和负边距如何实现兼容所有浏览器的ul和li并列效果

巧用CSS3 border如何实现图片遮罩效果代码

巧用CSS边框 制作技能冷却效果