动态基本教程第七节: 鼠标控制

• 定义一个 DIV 元素， 以及用 CSS 来给出它的性质 (CSS 位置设定)
• 如何知道哪种浏览器正在被使用 (通用程序)
• 如何设立一个通用的指针变量指向一个 DIV 元素 (通用程序)
• 以及如何显示或隐蔽这个 DIV 元素 (显示和隐蔽)
• 移动这个 DIV 元素 (元素的移动)
• 连续移动这个 DIV 元素 (元素的滑动)
• 用键盘来控制元素的运动 (键盘控制)

这一节我们将告诉你如何运用鼠标来控制这些运动方. 请你记住
我们的目标是写出兼容在 NetScape 和 Internet Explore 上的程序

鼠标点击控制

跟键盘控制一样，我们可以用鼠标来控制任何动画效果。 下面我们将要设立一个
连接， 当拿鼠标按这个连接的时候， 元素就能滑动， 当你放开鼠标的时候，滑动
就停止了。程序几乎跟键盘控制的一样。

  function init() {
    if (ns4) block = document.blockDiv
    if (ie4) block = blockDiv.style
    block.xpos = parseInt(block.left)
    block.active = false
  }

  function slide() {
    if (block.active) {
        block.xpos += 5
        block.left = block.xpos
        setTimeout("slide()",30)
    }
  }

区别在于如何做这个连接， 请看下面的语句：

 <A HREF="javascript:void(null)" onMouseDown="block.active=true;
      slide(); return false;" onMouseUp="block.active=false" 
      onMouseOut="block.active=false">move</A>

这里解释一下上面的连接:

• HREF="javascript:void(null)" 告诉浏览器不要换网页。 我们也可以用 HREF="#"
  来达到这个目的.
• onMouseDown 把变量 block.active 设为 true, 然后启动 slide()滑动元素。
• onMouseUp 把变量 block.active 设为 false, 这样滑动就停止了。
• onMouseOut 把变量 block.active 设为 false, 这样滑动就停止了。

看这个范例