如果客户端支持document.layers对象,
将名为truck的对象层左移5个位置.
如果名为truck的对象层的位置小于0,
则名为truck的对象层的的left属性设置
为480。
但是，如果客户端支持document.all对象,
则将名为truck的HTML对象的样式选项left的整
数值减去5。
如果名为truck的HTML对象的样式选项left的整
数值小于0，则将其数值设为480。
如果客户端支持document.all或document.layers对象
中的任何一种，
等候10秒钟，然后执行函数moveIt。
现在你自己作一下这个程序。让拖拉机在页面中移动。注意：你应该采用行内样式，例：<DIV id="truck"
style="position: absolute; left: 20; top: 20">。

  现在你已经可以在页面中移动对象了。 但是如果你需要将多个对象按照特定的顺序移动或者执行多个事件触发的行为时，不仅的代码体积会增加（每次访问一个对象时你都必须使用一次if/then 语句），而且每次都必须为某个行为键入document.truck.left 是一件很烦人的事。在Netscape模块中，当你嵌入DIV时，文件对象模块的层次结构就会增加，如下：

 <div id="foo">
   <div id="bar">
      <div id="sna">
      </div>
   </div>
</div>
  要访问foo，则必须执行document.foo, 而要访问bar，则必须执行document.foo.document.bar。而要访问sna，则必须执行document.foo.document.bar.document.sna。

  我快要受不了啦啦啦！！！

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

  任何用JavaScript编写过网页的人都知道任何打开一个小窗口：

windowID = window.open('name', 'http：//blah.com/&#39;);
  这项指令就可打开一个小窗口，但是你还可以通过使用windowID 作一个引用在继续控制追赶窗口。例如windowID.location = 'http：//www.taylor.org/就可以改变窗口资源的定位。"windowID.close()"就可关闭该窗口。你所做的只是对一个Javascript对象设置一个引用。在动态HTML中也可以使用同样的技巧。

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

 <script>
function setup(){
   if(document.layers){
      daTruck = document.truck;
   } else if(document.all) {
      daTruck = truck.style;
   }
}
</script>
现在moveIt函数可以被改为

function moveIt() {
   daTruck.left = parseInt(daTruck.left) - 5;
   if(parseInt(daTruck.left) < 0){
      daTruck.left = 480;
   }
   setTimeout('moveIt()', 100);
}
  代码短了一些，对吧？下面我们将使页面这些图象都动起来。

现在你所能控制的属性已经不只是left和top了，当然，还 有z-index。现在我们制作网猴们互相追赶的效果。

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) <0) || (parseInt(wtMonkey.left)> 150)) {
    dir = dir * -1;
    wtMonkey.zIndex = 5 - dir;
  }
  wtMonkey.left = parseInt(wtMonkey.left) + dir;
  setTimeout('moveMonkey(\'' + monkey + '\', ' + dir +')', 100);
}

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

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

进入HTML视频教程专区