📄 day3_6.html
字号:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: purple; text-decoration: underline}
.unnamed1 { font-family: "宋体"; font-size: 9pt}
-->
</style>
<style>
<!--#monkeyContainer {position: absolute; left:150px;
top:280px;width: 250px; height: 200px; z-index:6}
-->
</style>
<script language="javascript">
function moveMonkey(monkey, dir) {
if (document.all) {
var wtMonkey = document.all(monkey).style;
} else if (document.layers) {
var wtMonkey = document.monkeyContainer.document.layers[monkey];
}
if ((parseInt(wtMonkey.left) <120) || (parseInt(wtMonkey.left) > 270)) {
dir = dir * -1;
wtMonkey.zIndex = 5 - dir;
}
wtMonkey.left = parseInt(wtMonkey.left) + dir;
setTimeout('moveMonkey(\'' + monkey + '\', ' + dir +')', 100);
}
</script>
<title>网猴：动态HTML</title>
</head>
<body bgcolor="#FFFFFF" onload="moveMonkey('taylor', -5); moveMonkey('kristin', -5); moveMonkey('aaron', -5); moveMonkey('tim', -5); "><div align="left">
<table border="0" width="600">
<tr>
<td bgcolor="#ffff99" colspan="2"><font size="4" color="#000000"><strong>动态HTML教程
- 第三天</strong></font></td>
</tr>
<tr>
<td bgcolor="#FF6600" colspan="2"><em><font size="4"><a href="mailto:taylor@taylor.org">Taylor</a>
</font><font size="3">1998.3.9</font></em></td>
</tr>
<tr>
<td valign="top" align="left" colspan="2"><strong>第六页：制作网猴们互相追赶的动画效果</strong>
<p>现在你所能控制的属性已经不只是left和top了，当然，<br>
还 有z-index。现在我们制作网猴们互相追赶的效果。 </p>
<div id="monkeyContainer">
<dd><div id="desk" style="position:relative; left:155px; top:114px; width:83px; height:33px; z-index:5"><font face="verdana, arial, geneva, sans-serif" size="2">
</font>
<dd><font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="2"><img src="extraDesk.gif" width="122" height="48">
</font></dd>
</div>
<div id="kristin" style="position:absolute; left:176px; top:293px; width:36px; height:49px; z-index:9">
<dd> <font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="2"><img src="kristin.gif" width="42" height="67">
</font></dd>
</div>
<div id="tim" style="position:absolute; left:230px; top:281px; width:40px; height:70px; z-index:8">
<dd> <font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="2"><img src="day3_6k_tim01.gif" width="41" height="79">
</font></dd>
</div>
<div id="aaron" style="position:absolute; left:270px; top:289px; width:24px; height:14px; z-index:7">
<dd> <font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="2"><img src="day3_6c_aaron.gif" width="40" height="71">
</font></dd>
</div>
<div id="taylor" style="position:absolute; left:260px; top:276px; width:34px; height:42px; z-index:6">
<dd> <font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="2"><img src="day3_6e_taylor.gif" width="43" height="67">
</font></dd>
</div>
<font face="verdana, arial, geneva, sans-serif" size="2"> </div></font>
<p><font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="2"> </font></p>
<p><font size="2"> </font></p>
<p> </p>
<font face="verdana, arial, geneva, sans-serif" size="2">
<p> </p>
<p> </p>
<p> </p>
<p><font face="宋体" size="3">function moveMonkey(monkey, dir) {<br>
<br>
if (document.all) {<br>
<br>
var wtMonkey = document.all(monkey).style;<br>
<br>
} else if (document.layers) {<br>
<br>
var wtMonkey = document.monkeyContainer.document.layers[monkey];<br>
<br>
}<br>
<br>
<br>
<br>
if ((parseInt(wtMonkey.left) <0) || (parseInt(wtMonkey.left)> 150))
{<br>
<br>
dir = dir * -1;<br>
<br>
wtMonkey.zIndex = 5 - dir;<br>
<br>
}<br>
<br>
wtMonkey.left = parseInt(wtMonkey.left) + dir;<br>
<br>
setTimeout('moveMonkey(\'' + monkey + '\', ' + dir +')', 100);<br>
<br>
}</font></p>
</font>
<p><font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="3">网猴的名字被传递给函数，函数则改变网猴的左边的定位。</font><font face="宋体" size="4"><br>
</font><font size="3">然后进行标准的功能检查，为特定的浏览器设定引用参数。<font face="宋体"><br>
</font>然后它改变<font face="宋体">z-index</font>，如果网猴移动到了桌子的任何一端，<font face="宋体"><br>
</font>则函数改变网猴移动的方向。</font></p>
<p><font size="3"> <font face="verdana, arial, geneva, sans-serif"></font>注意这不是编制类属<font face="宋体">JavaScript</font>移动例程的唯一方法。你可<font face="宋体"><br>
</font>以随意添加、减少或编写自己的例程。下面是今天的家庭<font face="宋体"><br>
</font>作业。将<font face="宋体"><a href="http://www.hotwired.com/webmonkey/98/10/files/actIsceneI.html" target="_new">act
I, scene I </a></font>作出动画效果。你可以使用上面<font face="宋体"><br>
</font>所提供的代码或者编写你自己的代码。当你编写例程时注<font face="宋体"><br>
</font>意</font><font face="宋体" size="3">Netscape</font><font size="3">嵌入定位对象的方法。</font></p>
<p><font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="3">动态<font face="verdana, arial, geneva, sans-serif">HTML</font>教程<strong><br>
</strong><font color="#FF0000">第一页</font> </font><a href="day3_1.html"><font size="3">动态<font face="verdana, arial, geneva, sans-serif">HTML</font>教程
<font face="verdana, arial, geneva, sans-serif">- </font></font><font size="4">第三天</font></a><font size="4"><br>
</font><font size="3"><font color="#FF0000">第二页</font> <a href="day3_2.html">微软和网景不同的语法</a><br>
<font color="#FF0000">第三页</font> <a href="day3_3.html">使其在两种浏览器中都可用</a><br>
<font color="#FF0000">第四页</font> <a href="day3_4.html">脚本如何运行</a><br>
</font><font size="2"><font color="#FF0000" size="3">第五页</font><font size="3">
<a href="day3_5.html">访问对象的一个技巧</a><br>
</font><font color="#FF0000" size="3">第六页</font><font size="3"> 制作网猴们互相追赶的动画效果</font></font></p>
<p> <font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="3">[<a href="day1_1.html">第1天</a>][第2天][<a href="day3_1.html">第3天</a>][<a href="day4_1.html">第4天</a>][<a href="day5_1.html">第5天</a>]</font></p>
<font size="2" face="verdana, arial, geneva, sans-serif">
<hr>
<br>
本文由<a href="http://chd.126.com" target="_blank">《CHD的网络教室》</a>根据<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>相关文章改编，版权归<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>所有</font><font size="3">
</font><font size="2" face="verdana, arial, geneva, sans-serif"> </font></td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -