通过键盘控制盒子的移动与缩放

通过键盘控制盒子的移动与缩放

最近在学习键盘事件操作，通过键盘控制一个盒子在屏幕上的移动，主要引用了onkeydown事件，以及定时器以及while，因为在按键盘的时候需要有组合键，所以不能用if else判断。

主要解决方案：1.通过键盘的按键操作可以获取其键值，37向左，38向上，39向右，40向下；先设置其上下左右的值为false,然后通过按键使其变为true,还有组合键ctrlKey,依然可以判断是true还是false

var oDiv=document.getElementById('div1');
	
	var l=r=t=b=zoomInt=zoomOut=false;
	
	document.οnkeydοwn=function(ev){
		var oEvt=ev||event;
		switch(oEvt.keyCode){
			case 37:
				//←
				l=true;
				break;
			case 38:
				//↑
				t=true;
				if(oEvt.ctrlKey) zoomInt=true;
				break;
			case 39:
				//→
				r=true;
				break;
			case 40:
				//↓
				b=true;
				if(oEvt.ctrlKey) zoomOut=true;
				break;
					
		}
		
	};	

然后可以判断其松开时的状态

document.οnkeyup=function(ev){
		var oEvt=ev||event;
		switch(oEvt.keyCode){
			case 37:
				//←
				l=false;
				break;
			case 38:
				//↑
				t=false;
				if(oEvt.ctrlKey) zoomInt=false;
				break;
			case 39:
				//→
				r=false;
				break;
			case 40:
				//↓
				b=false;
				if(oEvt.ctrlKey) zoomOut=false;
				break;		
		}
		
	};	
	

按下时为true，松开时为false，然后根据l,t,r,b的值可以判断其运动的方向

2.通过按键控制盒子的位置，可以设置其left和top，再根据定时器控制其运动

setInterval(function(){
		if(r) oDiv.style.left=oDiv.offsetLeft+10+'px';	
		if(l) oDiv.style.left=oDiv.offsetLeft-10+'px';
		if(b&&zoomOut){
			oDiv.style.width=oDiv.offsetWidth-2+'px';
			oDiv.style.height=oDiv.offsetHeight-2+'px';
			oDiv.style.left=oDiv.offsetLeft+1+'px';
			oDiv.style.top=oDiv.offsetTop+1+'px';
		}else if(b){
			oDiv.style.top=oDiv.offsetTop+10+'px';
		}
		if(t&&zoomInt){
			oDiv.style.width=oDiv.offsetWidth+2+'px';
			oDiv.style.height=oDiv.offsetHeight+2+'px';
			oDiv.style.left=oDiv.offsetLeft-1+'px';
			oDiv.style.top=oDiv.offsetTop-1+'px';
		}else if(t){
			oDiv.style.top=oDiv.offsetTop-10+'px';	
		}
	},20);

其中要用到offsetLeft等属性，就是盒子当前的距窗口左边的距离，其中在判断组合键的时候要使两个条件同时满足，当放大的时候使其的宽度和高度自增加2px，但是当放大的时候其中心位置在左上角，不美观，可以使盒子的offsetLeft和offsetTop减1px，这样盒子的缩放就在其中心部分缩放。

演示地址