0034.htm

新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑

               { truck.style.left=&quot;480;&quot; } } </font></pre>
  <pre>          if ((document.layers) || (document.all))
 { setTimeout('moveIt()', 100); } } &lt;/script&gt;</font></pre>
</ul>

<p><font face="宋体">它的执行结果应该是:</font></p>
<div id="truck" style="position:relative; left:480px; width:40px; height:16px;"
align="center">
<dd><img src="dhtml/test.jpg" width="120" height="120"> </dd>
</div>

<p> 代码的含义如下：</font> </font>

<ul>
  <font size="3">
  <li><font face="宋体">如果客户端支持<tt>document.layers</tt>对象,</font></li>
  <ul>
    <li> 将名为<tt>truck</tt>的对象层左移5个位置.</font></li>
    <li><font face="宋体">如果名为truck的对象层的位置小于0,</font></li>
    <ul>
      <li><font face="宋体">则名为truck的对象层的的left属性设置<br>
        为480。 </font></li>
    </ul>
  </ul>
  <li> 但是，如果客户端支持<tt>document.all</tt>对象,</font></li>
  </font><ul>
    <font size="3">
    <li><font face="宋体">则将名为truck的HTML对象的样式选项left的整<br>
      数值减去5。</font></li>
    </font>
    <li><font size="3" face="宋体">如果名为truck的HTML对象的样式选项left的整<br>
      数值小于0，则将其数值设为480。 </font></li>
  </ul>
  <font size="3">
  <li><font face="宋体">如果客户端支持<tt>document.all</tt>或<tt>document.layers</tt>对象<br>
    中的任何一种， </font><ul>
      <li> 等候10秒钟，然后执行函数<tt>moveIt</tt>。 </font></li>
    </ul>
  </li>
  </font>
</ul>
<font size="3">

<p><font face="宋体">现在你自己作一下这个程序。让拖拉机在页面中移动。注意：你应该采用行内样式，例：<tt>&lt;DIV 
id=&quot;truck&quot;<br>
style=&quot;position: absolute; left: 20; top: 20&quot;&gt;</tt>。</font></p>
</font>
<p><font size="3"><font face="宋体">现在你已经可以在页面中移动对象了。 
但是如果你需要将多个对象按照特定的顺序移动或者执行多个事件触发的行为时，不仅的代码体积会增加（每次访问一个对象时你都必须使用一次if/then 
语句），而且每次都必须为某个行为键入<i>document.truck.left</i> 
是一件很烦人的事。在Netscape模块中，当你嵌入<tt>DIV</tt>时，文件对象模块的层次结构就会增加，如下： 
</font>

<ul>
  <pre> &lt;div id=&quot;foo&quot;&gt;
   &lt;div id=&quot;bar&quot;&gt;
      &lt;div id=&quot;sna&quot;&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;</font></pre>
</ul>

<p><font face="宋体">要访问<tt>foo</tt>，则必须执行<tt>document.foo</tt>, 
而要访问<tt>bar</tt>，则必须执行<tt>document.foo.document.bar</tt>。而要访问<tt>sna</tt>，则必须执行<tt>document.foo.document.bar.document.sna。</tt></font></p>

<p><font face="宋体">我快要受不了啦啦啦！！！</font></p>

<p><font face="宋体">所以你必须解决引用对象时造成的代码体积膨胀的问题，还得避免每次移动一个对象时必须设定条件。但你可以用一个技巧解决这个问题。</font></p>

<p><font face="宋体">任何用JavaScript编写过网页的人都知道任何打开一个小窗口：</font> 

<ul>
  <pre><font face="宋体">windowID = window.open('name', 'http://blah.com/');</font></pre>
</ul>
</font>

<p><font size="3" face="宋体">这项指令就可打开一个小窗口，但是你还可以通过使用<tt>windowID</tt> 
作一个引用在继续控制追赶窗口。例<br>
如<tt>windowID.location = 'http://www.taylor.org/</tt>就可以改变窗口资源的定位。<tt>&quot;windowID.close()&quot;</tt>就可关闭该窗口。你所做的只是对一个Javascript对象设置一个引用。在动态HTML中也可以使用同样的技巧。 
</font></p>
<font size="3">

<p><font face="宋体">你可能会注意到在上一页的图表中，大多数定位属性的语法都很相似。只不过它们被用在了不同的对象上。我们可以用一个JavaScript例程解决上面的问题。</font> 

<ul>
  <pre> &lt;script&gt;
function setup(){
   if(document.layers){
      daTruck = document.truck;
   } else if(document.all) {
      daTruck = truck.style;
   }
}
&lt;/script&gt;</font></pre>
</ul>

<p><font face="宋体">现在<tt>moveIt</tt>函数可以被改为</font> 

<ul>
  <pre><font face="宋体">function moveIt() {
   daTruck.left = parseInt(daTruck.left) - 5;
   if(parseInt(daTruck.left) &lt; 0){
      daTruck.left = 480;
   }
   setTimeout('moveIt()', 100);
}</font></pre>
</ul>

<p> 代码短了一些，对吧？下面我们将使页面这些图象都动起来。</font></p>
</font>
<p>现在你所能控制的属性已经不只是left和top了，当然，还 有z-index。现在我们制作网猴们互相追赶的效果。 
</p>
<div id="monkeyContainer" align="center">
<dd><div id="desk"
  style="position:relative; left:155px; top:114px; width:83px; height:33px; z-index:5">
  <dd><font size="2"><img src="dhtml/test.jpg" width="120" height="120"> </font></dd>
  </div><div id="kristin"
  style="position:absolute; left:176px; top:293px; width:36px; height:49px; z-index:9">
  <dd><font size="2"><img src="dhtml/test2.jpg" width="68" height="68"> </font></dd>
  </div><div id="tim"
  style="position:absolute; left:230px; top:281px; width:40px; height:70px; z-index:8">
  <dd><font size="2"><img src="dhtml/test2.jpg" width="68" height="68"> </font></dd>
  </div><div id="aaron"
  style="position:absolute; left:270px; top:289px; width:24px; height:14px; z-index:7">
  <dd><font size="2"><img src="dhtml/test2.jpg" width="68" height="68"> </font></dd>
  </div><div id="taylor"
  style="position:absolute; left:260px; top:276px; width:34px; height:42px; z-index:6">
  <dd><font size="2"><img src="dhtml/test1.jpg" width="128" height="128"> </font></dd>
  </div><font face="verdana, arial, geneva, sans-serif" size="2"></dd>
</div></font>

<p align="center">　</p>

<p align="center">　</p>

<p align="center">　</p>
<font face="verdana, arial, geneva, sans-serif" size="2">

<p><font face="宋体" size="3">function moveMonkey(monkey, dir) {<br>
&nbsp; if (document.all) {<br>
&nbsp;&nbsp;&nbsp; var wtMonkey = document.all(monkey).style;<br>
&nbsp; } else if (document.layers) {<br>
&nbsp;&nbsp;&nbsp; var wtMonkey = document.monkeyContainer.document.layers[monkey];<br>
&nbsp; }<br>
<br>
&nbsp; if ((parseInt(wtMonkey.left) <0) || (parseInt(wtMonkey.left)> 150)) {<br>
&nbsp;&nbsp;&nbsp; dir = dir * -1;<br>
&nbsp;&nbsp;&nbsp; wtMonkey.zIndex = 5 - dir;<br>
&nbsp; }<br>
&nbsp; wtMonkey.left = parseInt(wtMonkey.left) + dir;<br>
&nbsp; setTimeout('moveMonkey(\'' + monkey + '\', ' + dir +')', 100);<br>
}</font></p>
</font>

<p><font size="3">网猴的名字被传递给函数，函数则改变网猴的左边的定位。然后进行标准的功能检查，为特定的浏览器设定引用参数。然后它改变<font
face="宋体">z-index</font>，如果网猴移动到了桌子的任何一端，则函数改变网猴移动的方向。</font></p>

<p><font size="3">注意这不是编制类属<font face="宋体">JavaScript</font>移动例程的唯一方法。你可以随意添加、减少或编写自己的例程。下面是今天的家庭作业。将作出动画效果。你可以使用上面所提供的代码或者编写你自己的代码。当你编写例程时注意</font><font
face="宋体" size="3">Netscape</font><font size="3">嵌入定位对象的方法。</font></p>

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>