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 + -
显示快捷键?