revealTrans滤镜制作超弦图片的播放 - HTML/CSS教程 - 网页制作

ljjk5

元帅

UID 46706
精华 1
积分 99426
帖子 49690
威望 554
金币 48489
热心 505
阅读权限 100
注册 2007-2-25
状态离线

使用道具

发表于 2007-11-24 21:07 资料个人空间主页短消息加为好友

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>

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

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

网友 ljjk5 签名 - 网友社区 ===

[广告] 免费域名(Free Subdomain) 免费空间(Free hosting) PR查询(Google Pagerank)

网友生活网 \| 网友学堂	如何获得金币？	诚招斑竹	IP归属地查询 PR查询收录查询 whois查询
免费超短2级域名,your.jpy.cc	传世私服 \| 传奇世界私服	注册亚洲交友中心，找个人来同居吧！	免费存储空间，免费网络硬盘