想在onmousedown的情況下實現onkeydown的功能 教教我
下面是我寫代碼 拖動功能實現了 放大縮小功能不能實現
<script type="text/javascript">
function beginDrag(elementToDrag,event)
{
//该元素当前位于何处
//该元素的样式性质必须具有left和top css属性
//此外,我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离,下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
var w=parseInt(elementToDrag.width);
var h=parseInt(elementToDrag.height);
var rate1 = 1.25;
var rate2 = 0.85;
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序
// 注意,它们被注册为文档的捕捉事件处理程序
// 在鼠标按钮保持按下的状态的时候,这些事件处理程序保持活动的状态
// 在按钮被释放的时候,它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
document.attachEvent("onkeydown",zoom);
//我们已经处理了该事件,不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
function upHandler(e)
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
document.detachEvent("onmousemove",zoom);
}
function zoom(e){
e = window.event;
elementToDrag.focus();
elementToDrag.onkeydown=function(e){
var elementToDrag=elementToDrag||e;
switch(elementToDrag.keyCode){
//case 37:
// break;
case 38:
w = Math.floor(w*rate1);
h = Math.floor(h*rate1);
if(w>0&&h>0){
elementToDrag.style.width = w+"px";
elementToDrag.style.height = h+"px";
}
break;
//case 39:
//break;
case 40:
w = Math.floor(w*rate2);
h = Math.floor(h*rate2);
if(w>0&&h>0){
elementToDrag.style.width = w+"px";
elementToDrag.style.height = h+"px";
}
break;
}
//不要让别的元素看到该事件
event.cancelBubble=true;
}
// 调用它的HTML文件代码:
</script>