<html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ width:100px; height:100px; background: red; position:absolute; left:100px; top:100px; transition: 0.1s; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var left = false; var right = false; var top = false; var bottom = false; document.onkeydown = function(ev){ var oEvent = ev || event; var keyCode = oEvent.keyCode; switch(keyCode){ case 37: left=true; break; case 38: top=true; break; case 39: right=true; break; case 40: bottom=true; break; } }; setInterval(function(){ if(left){ oDiv.style.left = oDiv.offsetLeft-10+"px"; }else if(top){ oDiv.style.top = oDiv.offsetTop-10+"px"; }else if(right){ oDiv.style.left = oDiv.offsetLeft+10+"px"; }else if(bottom){ oDiv.style.top = oDiv.offsetTop+10+"px"; } },50); document.onkeyup = function(ev){ var oEvent = ev || event; var keyCode = oEvent.keyCode; switch(keyCode){ case 37: left=false; break; case 38: top=false; break; case 39: right=false; break; case 40: bottom=false; break; } } } </script> </head> <body> <div id="div1"></div> </body> </html>
js键盘方向键实现盒子移动
猜你喜欢
转载自blog.csdn.net/weixin_42413689/article/details/80924887
今日推荐
周排行