分享
 
 
 

revealTrans滤镜制作超弦图片的播放

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有