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