想在onmousedown的情況下實現onkeydown的功能 教教我

athrun1357 2012-03-15 12:18:12
下面是我寫代碼 拖動功能實現了 放大縮小功能不能實現
<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>
...全文
200 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,989

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧