- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>上下左右事件</title>
- <style type="text/CSS">
- *{margin:0;padding:0;}
- </style>
- </head>
- <body>
- <div id="div1" style="width:50px;height:50px;background:#ccc;position:absolute;top:300px;left:500px;">
- </div>
- <script type="text/javascript">
- window.onload=function(){
- var oDiv = document.getElementById("div1");
- document.onkeydown=function(ev){
- var oEvent=ev||event;
- if(oEvent.keyCode==38){
- oDiv.style.top=oDiv.offsetTop-10+"px"
- } else if(oEvent.keyCode==40){
- oDiv.style.top=oDiv.offsetTop+10+"px"
- } else if(oEvent.keyCode==39){
- oDiv.style.left=oDiv.offsetLeft+10+"px"
- } else if(oEvent.keyCode==37){
- oDiv.style.left=oDiv.offsetLeft-10+"px"
- }
- }
- }
- /*按键code即键码
- document.onkeydown = function(ev){
- var oEvent=ev||event;
- alert(oEvent.keyCode)
- }
- */
- </script>
- </body>
- </html>
- <!-- var oEvent = ev||event;
- var X = oEvent.clientX;
- var Y = oEvent.clientY;
- -->
- //该片段来自于http://www.codesnippet.cn/detail/0604201614639.html
来源: http://www.codesnippet.cn/detail/0604201614639.html