📄 网页动画.htm
字号:
<html>
<head>
<meta name="VI60_DefaultClientScript" Content="VBScript">
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title></title>
</head>
<script language="VBScript">
<!--
'定义公用变量
'lightstrength是表示光强的变量
'tid是计时器句柄
'contents数组存储幕词
'content变量表示正显示到哪一句幕词
'steps是重要的变量,它表示动画正处于哪一步,初始化为第一步
dim lightstrength,tid,tmp_width,contents(8),steps,content
'变量tmp_width表示幕布的宽度
tmp_width=200
steps=1
'初始化光强
lightstrength=0
'初始化contents数组和content变量
content=0
contents(0)=""
contents(1)="我曾经爱过你：爱情，也许<br>"
contents(2)="在我的心灵里还没有完全消亡<br>"
contents(3)="但愿它不会再打扰你；<br>"
contents(4)="我也不想再使你难过悲伤<br>"
contents(5)="我曾经默默无语地、毫无指望地爱过你,<br>"
contents(6)="我既忍受着羞怯，又忍受着嫉妒的折磨；<br>"
contents(7)="我曾经那样真诚、那样温柔地爱过你；<br>"
contents(8)="愿上帝保佑你，另一个人也会像我爱你一样。"
'程序一开始要做的工作
sub init
'为图像对象添加滤镜,此滤镜为灯光滤镜,这句话为对象添加了一个环境灯源
call tl.filters.Light.addAmbient(255,255,255,0)
end sub
'动画主程序
sub annimation
'根据不同的阶段值来选择不同阶段的动画
'整个动画分为五步
select case steps
'第一步是揭幕
case 1
'改变(缩小)幕宽
tmp_width=tmp_width-10
'如果幕宽足够小,一般不会是0
if tmp_width<2 then
'进入第二步
steps=2
else
'否则,改变幕宽,即改变左右幕布图像的宽度
img1.style.posWidth=tmp_width
img2.style.posWidth=tmp_width
end if
'计时循环
'注意这一句必须放在判断语句之外,因为当这一阶段结束后,即steps赋值为2后,还要自动地调用本程序以进入第二阶段
tid=setTimeout("annimation",300)
'第二步是幕词的逐一出现
case 2
'每次增加一行文字
content=content+1
'判断是否文字已经写满
if content>8 then
'如果是进入第三步
steps=3
else
'否则,动态改变div2标记的内容,将文字添入
div2.innerHTML=div2.innerHTML & contents(content)
end if
'计时循环,同样这句要放到判断语句之外
tid=setTimeout("annimation",1500)
'第三步是幕词的上移
case 3
'幕词上移,即div2模块的顶部位置top上移(减少),每次移动步长为5px
div2.style.posTop=div2.style.posTop-5
'tmp_top变量表示此时顶部位置的绝对值
tmp_top=abs(div2.style.posTop)
'如果此绝对值已经超过了div2的长度
if tmp_top>=300 then
'则进入第四步
steps=4
'令幕词彻底消失
div2.style.visibility ="hidden"
'将天龙八部这几个字从背景div3之后,移到背景div3之前,方法是交换两个div块的z-index值
div3.style.zIndex =-3
div4.style.zIndex =-2
else
'否则,决定幕词模块div2的剪切范围,产生幕词上移并消失的效果
div2.style.clip="rect("&tmp_top+20&",400,300,0)"
end if
'计时循环
tid=setTimeout("annimation",100)
'第四步是天龙八部这幅图像从暗到亮的渐现效果
case 4
'灯光强度加强
lightstrength=lightstrength+5
'如果灯光足够强了
if lightstrength>100 then
'则进入第五步
steps=5
else
'否则利用灯光过滤器的方法设置新的光强
call tl.filters.Light.changestrength(0,lightstrength,1)
end if
'计时循环
tid=setTimeout("annimation",100)
'第五步是背景图像混合渐变的效果
case 5
'下面是实现渐变的固定代码
bg.filters(0).apply()
bg.src="curtainback2.jpg"
bg.filters(0).play()
'注意:最后不要再加计时循环了,因为滤镜的过渡由机器接完成,不由人为控制,而且这个效果完成之后,所有的动画就结束了
end select
end sub
-->
</script>
<body onload="init" onclick="annimation" bgColor=darkslategray>
<div id="div4" style="HEIGHT: 300px; LEFT: 0px; POSITION: absolute; TEXT-ALIGN: center; TOP: 0px; VERTICAL-ALIGN: middle; WIDTH: 400px; Z-INDEX: -3">
<img id="tl" style="FILTER: light; HEIGHT: 38px; WIDTH: 300px" src="tianlong.gif" align="middle" WIDTH="400" HEIGHT="390">
</div>
<div id="div3" style="HEIGHT: 300px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 400px; Z-INDEX: -2">
<img id="bg" src="curtainback.jpg" style="FILTER: blendTrans(Duration =3); HEIGHT: 300px; WIDTH: 400px" WIDTH="400" HEIGHT="300">
</div>
<div id="div2" style="COLOR: red; FONT-SIZE: larger; FONT-WEIGHT: bold; HEIGHT: 300px; LEFT: 0px; POSITION: absolute; TEXT-ALIGN: center; TOP: 0px; VERTICAL-ALIGN: middle; WIDTH: 400px; Z-INDEX: -1">
</div>
<div id="div1" style="HEIGHT: 300px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 400px" >
<img id="img1" src="left.jpg" style="HEIGHT: 300px; WIDTH: 200px" align="left" WIDTH="200" HEIGHT="300">
<img id="img2" src="right.jpg" style="HEIGHT: 300px; WIDTH: 200px" align="right" WIDTH="200" HEIGHT="300">
</div>
<div style="HEIGHT: 300px; LEFT: 420px; POSITION: absolute; TOP: 0px; WIDTH: 300px;color:yellow" >
<font color=red><strong><h1 align=center>动画</h1></strong></font>
<font face="楷体_GB2312" size=6>请点击屏幕的任何一个地方观看电影动画的效果</font>
</div>
<form action="网页动画.htm">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<center><INPUT type="submit" value="重新放映" id=submit1 name=submit1>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -