<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">#bbb{Height:300px;width:300px;Background-color:AliceBlue;position:relative; } </style> <Scriptsrc=".. /jquery-3.2.1/jquery-3.2.1.js "></Script> <Scripttype= "Text/javascript"> $(function() { $("#left"). Click (function() { $("Div:not (: Animated)"). Animate ({left:"-=100" }, -); }); $("#right"). Click (function() { $("Div:not (: Animated)"). Animate ({left:"+=100" }, -); }); $("#up"). Click (function() { $("Div:not (: Animated)"). Animate ({top:"-=100" }, -); }); $("#down"). Click (function() { $("Div:not (: Animated)"). Animate ({top:"+=100" }, -); }); }) $ (document). KeyDown (function() { if(Event.keycode== 'Panax Notoginseng') { $("Div:not (: Animated)"). Animate ({left:"-=100" }, -); } if(Event.keycode== ' the') { $("Div:not (: Animated)"). Animate ({left:"+=100" }, -); } if(Event.keycode== ' -') { $("Div:not (: Animated)"). Animate ({top:"-=100" }, -); } if(Event.keycode== ' +') { $("Div:not (: Animated)"). Animate ({top:"+=100" }, -); } }) </Script> </Head> <Body> <ButtonID= "Left">Left</Button> <ButtonID= "Right">Right</Button> <ButtonID= "Up">Up</Button> <ButtonID= "Down">Down</Button> <DivID= "BBB"></Div> </Body></HTML>
The code implements the function of moving the div box through the keyboard by adding the KeyDown method.
07.30 "JQuery"--2.2 use the keyboard to control the Div box around the next key