就象用键盘控制一样, 我们也可以用鼠标来控制动画效果. 下面要做的就是建立一个超级链接, 当用鼠标按住它时会引起一个小方块的滑动. 松开鼠标按键则滑动停止.
这个脚本中并没有新内容. 我们需要一个 active 变量, 函数则与前面的并无二致:
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>
onMouseDown 把 active 变量设为true, 然后运行 slide( ) 函数开始动画. 在链接被按住的过程中没有任何变化. 小方块继续滑动直到你松开超级链接 -- 此后的动作由 onMouseUp 来控制. 它将 active 变量设置为false以停止滑动.
当出现错误时 onMouseOut 也将 active 变量设置为 false. 我发现如果你把鼠标指针从链接上移开后再松开按键, 移动将不会停止 -- 因为你并没有在链接上执行 MouseUp. 但是当添加了 onMouseOut 之后这个问题就解决了.
点击这里观看这个例子.
首页 | 下一课: 图像变换/翻转 |