Using JS keyboard events to create a moving effect

Blocks that will move

Describes pressing the arrow keys on the keyboard to move the block, holding down the ALT key and the arrow keys for a large move

<! DOCTYPE html>;}    div {Width:200px;height:200px;position:absolute;background:cyan;} </style> <script>/*analysis left corresponding key code keycode:37 on the corresponding key code keycode:38 right corresponding key code keycode:39 the corresponding key code keycode:40 */window.onload=function(){            varOdiv = document.getElementById (' div '); Window.onkeydown=function(EV) {varE = EV | |window.event; //alert (e.keycode);//view Key code                varSpeed = 10;//the number of each change                //determine if the ALT key is pressed, and if you press the number of increments by 10 times times                if(e.altkey) { speed*= 10; }                Switch(e.keycode) {//left                     Case37:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (Odiv, "left")); //each effective style minus 10pxODiv.style.left = current-speed + ' px ';  Break; //on                     Case38:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (odiv, ' top ')); //each effective style minus 10pxODiv.style.top = current-speed + ' px ';  Break; //Right                     Case39:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (Odiv, "left")); //each effective style plus 10pxODiv.style.left = current + speed + ' px ';  Break; //under                     Case40:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (odiv, ' top ')); //each effective style plus 10pxODiv.style.top = current + speed + ' px ';  Break; }            }        }        /*------Encapsulates a function that gets the current valid style---------*/            functionGetStyle (node, styletype) {returnNode.currentstyle?Node.currentstyle[styletype]: getComputedStyle (node) [Styletype]; }        /*------Encapsulates the function end that gets the current valid style---------*/</script>
Browser effects:
On this basis, insert a background map to decorate
<! DOCTYPE html>;}    div {width:293px;height:220px;position:absolute;background:url (fenghuang1.gif);} </style> <script>/*analysis left corresponding key code keycode:37 on the corresponding key code keycode:38 right corresponding key code keycode:39 the corresponding key code keycode:40 */window.onload=function(){            varOdiv = document.getElementById (' div '); Window.onkeydown=function(EV) {varE = EV | |window.event; //alert (e.keycode);//view Key code                varSpeed = 10;//the number of each change                //determine if the ALT key is pressed, and if you press the number of increments by 10 times times                if(e.altkey) { speed*= 10; }                Switch(e.keycode) {//left                     Case37:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (Odiv, "left")); //each effective style minus 10pxODiv.style.left = current-speed + ' px '; //Press left when Div transform is equal to 180 degrees counterclockwiseODiv.style.transform = ' rotate ( -180deg) ';  Break; //on                     Case38:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (odiv, ' top ')); //each effective style minus 10pxODiv.style.top = current-speed + ' px '; //the div section transform is equal to 90 degrees counterclockwise when pressed.ODiv.style.transform = ' rotate ( -90deg) ';  Break; //Right                     Case39:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (Odiv, "left")); //each effective style plus 10pxODiv.style.left = current + speed + ' px '; //when you press right, Div transform is equal to 0 degrees counterclockwise .ODiv.style.transform = ' rotate (0deg) ';  Break; //under                     Case40:                             //gets the current valid value, gets the value of the unit PX is converted to an integer type with parseint (minus units)                        varCurrent = parseint (GetStyle (odiv, ' top ')); //each effective style plus 10pxODiv.style.top = current + speed + ' px '; //when you press right, Div transform is equal to 90 degrees clockwise .ODiv.style.transform = ' rotate (90deg) ';  Break; }            }        }        /*------Encapsulates a function that gets the current valid style---------*/            functionGetStyle (node, styletype) {returnNode.currentstyle?Node.currentstyle[styletype]: getComputedStyle (node) [Styletype]; }        /*------Encapsulates the function end that gets the current valid style---------*/</script>
Browser effects:
Pictures to use:
Using JS keyboard events to create a moving effect