Using JS keyboard events to create a moving effect

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.