鼠标点击动画

就象用键盘控制一样, 我们也可以用鼠标来控制动画效果. 下面要做的就是建立一个超级链接, 当用鼠标按住它时会引起一个小方块的滑动. 松开鼠标按键则滑动停止.

这个脚本中并没有新内容. 我们需要一个 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 之后这个问题就解决了.

点击这里观看这个例子.

首页 下一课: 图像变换/翻转
copyright 1998 Dan Steinman
Translated by Cartouche YU