htmlanim.htm

来自「Windows Web脚本开发指南/(美) Dan Heflin, Todd N」· HTM 代码 · 共 64 行

HTM
64
字号
<html>

<head>
<XML:NAMESPACE PREFIX="anim"/>
<title>HTML+TIME and Anim Default Behaviors</title>
<STYLE>
anim\:DA    { behavior: url(#default#anim); }
</STYLE>
</head>

<script language="Jscript">

function startPage(){
	startData();
}
function startData(){
var m;

	m = divTest.statics;
	img1 = m.ImportImage("sprocket.gif");

    rotImg = img1.Transform(m.Rotate2RateDegrees(60));
	document.all.divTest.Image = rotImg;

	m = divTest2.statics;
	img1 = m.ImportImage("sprocket2.gif");
	rotImg = img1.Transform(m.Rotate2RateDegrees(-60));
	document.all.divTest2.Image = rotImg;

}

function restartShow(){
	document.all.showPics.beginElement();	
	document.all.showText.beginElement();	
}
</script> 
<body onload="startPage()">
<div style="width:300; height:180;position:absolute;top:20"><h4 align="center">An ANIM Default DHTML Behavior Example</h4>
<div style="border:2 solid red;width:300; height:180;position:absolute;top:40"><h4 align="center">These sprockets will spin forever! Or until you close the page.</h4>
<anim:DA ID="divTest" STYLE="position:absolute; top:5; width:200; height:200; z-index: 1;" />
<anim:DA ID="divTest2" STYLE="position:absolute; top:5; left:95; width:200; height:200; z-index: 1;" />
</div>
</div>
<div style="width:240; height:175;position:absolute;top:20;left:320" ><h4 align="center">Our Space Shuttle Trip</h4>
<span style="behavior:url(#default#time)" t:TIMELINE="seq" id="showPics">
	<img style="behavior:url(#default#time);position:absolute;top:40;" t:DUR="4" src="ss1.jpg" width="240" height="180" >
	<img style="behavior:url(#default#time);position:absolute;top:40;" t:DUR="4" src="ss2.jpg" width="240" height="180" >
	<img style="behavior:url(#default#time);position:absolute;top:40;" t:DUR="4" src="ss3.jpg" width="240" height="181" >
	<img style="behavior:url(#default#time);position:absolute;top:40;" t:DUR="4" src="ss4.jpg" width="240" height="180" >
	<img style="behavior:url(#default#time);position:absolute;top:40;" src="ss5.jpg" width="240" height="180" >
</span>
<span style="behavior:url(#default#time)" t:TIMELINE="seq" id="showText">
	<h5 style="behavior:url(#default#time);position:absolute;top:220" t:DUR="4">Hey Todd, what's this button for?</h5>
	<h5 style="behavior:url(#default#time);position:absolute;top:220" t:DUR="4">Ooooooooooh nooooooo, I think I know what it is and it's not good.</h5>
	<h5 style="behavior:url(#default#time);position:absolute;top:220" t:DUR="4">Todd, I think I found a way out of here.</h5>
	<h5 style="behavior:url(#default#time);position:absolute;top:220" t:DUR="4">We finally made it back home.</h5>
	<h5 style="behavior:url(#default#time);position:absolute;top:220" >Hey! Now, where are we going? Let us out of here. Momma!</h5>
</span>
<input type="button" name="Restart" value="Restart" style="position:absolute;top:260" onclick="restartShow()">
</div>
</body>

</html>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?