1. 爱易网页
  2. CSS教程
  3. 巧用CSS滤镜制造绚丽图片播放效果

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

日期：2014-04-16　 浏览次数：21424 次

网页制造aiyiweb文章简介：CSS中有revealTrans滤镜在网页中制造特效非常有用途。这次，我们预备引见另一种使用revealTrans滤镜制造出超弦图片播放的效果。

    CSS中有revealTrans滤镜在网页中制造特效非常有用途。这次，我们预备引见另一种使用revealTrans滤镜制造出超弦图片播放的效果。

　　实现思路：使用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" 

相关资料更多>

  1. CSS教程(6)：实例学习CSS如何控制网页文本
  2. 网页布局教程:BFC的运用和Margin Collapse
  3. dl,dt,dd标志在网页中要充沛应用
  4. DIV+CSS总结:有用的3个网页制造技巧
  5. 照应式规划该怎样设计？CSS3 Media Query完成照应规划
  6. CSS中慎用中文注释
  7. 恢复设计稿停止页面制造的流程和留意事项
  8. 兴趣知识：应用CSS停止网页制造中易被无视的效果
  9. CSS合理的编码与组织技巧