主题:  DHTML 系列教程7 - 鼠标点击效果

QQlan

职务:版主
等级:1
金币:1.0
发贴:158
注册:2000/9/19 10:35:21
#12001/3/13 2:13:28
鼠标点击效果
翻译: QQlan

我们可以使用鼠标点击超链接来开始和停止物体移动. 按下超链接, block将滑行, 一旦释放滑行就停止.

这里没有什么新的技术. 我们需要一个动态变量, 以及copy过去的functions.


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)
    }
}


关键在这个超链接:


move


onMouseDown 设置动态变量为 true , 然后调用slide() function. 当链接被点住, 则没有任何变化. 一旦鼠标释放链接(松开点击) 则停止滑动. 所以 onMounseUp 决定执行状态. 它设置动态变量为 false 来终止程序的运行.

onMouseOut 通过设置活动变量为false进行error校验. 我发现如果你先移动鼠标,然后释放, 物体还会继续执行移动. 这是因为你没有在链接上执行 onMouseUp. 使用onMouseOut 弥补了这个漏洞.

范例: www.dansteinman.com/dynduo/examples/mouseclick1.html


---------------------------------------------------------------------
5DMedia版权所有, 转载请注明出处!