JS Keyboard control Div Move

<style type= "Text/css" > Html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background: #f0f0f0; border:1px dotted #333; font:12px/1.5 Courier new;margin:12px;} Span{color: #999;} #box {position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;} </style> <script type= "Text/javascript" > window.onload = function () {var oBox = document.getElementById (" Box "), var bleft = Btop = BRight = Bbottom = Bctrlkey = False;setinterval (function () {if (bleft) {oBox.style.left = Obox.off setLeft-10 + "px"}else if (bRight) {oBox.style.left = Obox.offsetleft + ten + "px"}if (btop) {oBox.style.top = Obox.offsett op-10 + "px"}else if (bbottom) {oBox.style.top = Obox.offsettop + ten + "px"}//Prevent overflow limit ();},30); Document.onkeydown = function (event) {var event = Event | | window.event;bctrlkey = event.ctrlkey;switch (event.keycode) {C ASE 37:bleft = true;break;case 38:if (bctrlkey) {var oldwidth = Obox.offsetwidth;var OldHeight = Obox.offsetheight;o Box.stylE.width = obox.offsetwidth * 1.5 + "px"; oBox.style.height = obox.offsetheight * 1.5 + "px"; OBox.style.left = Obox.offsetleft-(obox.offsetwidth-oldwidth)/2 + "px"; oBox.style.top = Obox.offsettop-(OBOX.OFFSE Theight-oldheight)/2 + "px"; }btop = true;break;case 39:bright = true;break;case 40:if (bctrlkey) {var oldwidth = Obox.offsetwidth;var OldHeight = OBOX.O Ffsetheight;obox.style.width = obox.offsetwidth * 0.75 + "px"; oBox.style.height = obox.offsetheight * 0.75 + "px"; OBox.style.left = Obox.offsetleft-(obox.offsetwidth-oldwidth)/2 + "px"; oBox.style.top = Obox.offsettop-(OBOX.OFFSE Theight-oldheight)/2 + "px"; }bbottom = True;break;case 49:bctrlkey && (oBox.style.background = "green"); Break;case 50:bctrlkey && ( OBox.style.background = "Yellow"); Break;case 51:bctrlkey && (oBox.style.background = "Blue"); return false};d Ocument.onkeyup = function (event) {switch ((event | | window.event). keycode) {case 37:bleft = false;break; CasE 38:btop = false;break;case 39:bright = false;break;case 40:bbottom = false;break;}};/ /Prevent overflow function limit () {var doc = [Document.documentElement.clientWidth, document.documentelement.clientheight]// Prevent left overflow obox.offsetleft <=0 && (oBox.style.left = 0);//Prevent top overflow obox.offsettop <=0 && (oBox.style.top  = 0);//Prevent Right overflow doc[0]-obox.offsetleft-obox.offsetwidth <= 0 && (oBox.style.left = doc[0]-obox.offsetwidth +  "px");//Prevent bottom overflow doc[1]-obox.offsettop-obox.offsetheight <= 0 && (oBox.style.top = doc[1]-obox.offsetheight + "px")}};</script> on: ↑ under: ↓ Left: ← Right: →ctrl + 1: Background changed to green CTRL + 2: Background changed to yellow CTRL + 3: Background changed to blue Ctrl +↑: Zoom In Ctrl +↓: Zooms out

　　

Moved block "DIV" <div id= "box" ></div>

JS Keyboard control Div Move