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"
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代码中的图片。
注重，页面地址必须与图片张数相对应。
分享到：
相关推荐
讲解CSS动态滤镜RevealTrans滤镜的用法，transition参数的参数值有24中，以代号0-23来表示，分别代表24中显示类型
CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接...
实现图片切换类似幻灯片效果, 一共23种切换效果, 代码十分简单明了, 没有多余的干扰代码, 看后马上就能明白怎样使用动态滤镜. 测试环境: Window XP professional sp3, IE 6.0
CSS中的Filter样式大全及滤镜兼容问题(本人辛苦搜集)
图形特效 javascript 滤镜效果
下面首先来看下RevealTrans的用法(可以同时打开当鼠标移动到链接，类似幻灯片效果出现提示,移开也一样这个页巩固下). 语法： filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , ...
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"> 盒状收缩 <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"> 盒状展开 ...
alpha，blur，chroma，dropshadow，revealtrans，shadow等方法
在网页适当的位置添加图片，命名，如fz，并设置滤镜效果 <img src="images/7.jpg" name="fz" width="320" height="480" id="fz" revealTrans(duration=2,transition=1 )"> FILTER: revealTrans(duration=4,...
div{ FILTER:revealTrans(transition=4,duration=2); POSITION:absolute; left:0px; top:32px; width:100%; visibility: visible; } 五一欢乐购 棉花 广告设计素材 结婚...
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"> 退出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
动态的链接提示 .article { BACKGROUND-COLOR: #ffcc00;... FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3p
META http-equiv=Page-Enter CONTENT=RevealTrans(Duration=4,Transition=n)> 其中,n表示的就是下面的数，n取不同的值，对应有不同的效果： 0、Box in 1、Box out 2、Circle in 3、Circle out 4、Wipe up 5、...
js动画效果图片切换,只需要准备若干幅大小相同的图片，在页面中引用RevealTrans.js,然后把RevealTrans.htm中对应代码粘到页面中你要放图片的地方，代码中图片的路径改成你自己的，是不是很方便呢
s += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollWidth; s += " 网页正文全文高："+ document.body.scrollHeight; s += " 网页被卷去...
<!DOCTYPE html PUBLIC “-//W3C//DTD ...<head><title>.../title>...style type=”text/css”>.trans {filter:revealTrans(Transition=12,Duration=2)}</style></head><body><s
本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法。分享给大家供大家参考。具体实现方法如下： <... <head> ...div id="div1" class="yellow" style="VISIBILITY:...filter: revealTrans(transition=12, 'durat
focpic.filters.revealTrans.transition=23; } else { focpic.style.visibility = "visible"; focpic.filters[0].transition=23; } focpic.filters[0].Play(); stopit(); } function playnext(){ if...