html中上下左右控制对象移动Demo

沙振宇 2016-08-26 12:57:31

6937

分类专栏： //Demo小锦集 //Web 文章标签： html 移动按键

本文链接：https://blog.csdn.net/u014597198/article/details/52327329

版权

简介

做了这样一个小Demo，再键盘上，按上下左右，控制一个图片在另一个图片上移动。

效果（动态）

代码

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="always" name="referrer">
<title>html中上下左右控制对象移动Demo--沙师弟专栏</title>
</head>
<script>

document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var div = document.getElementById('container');
var top = div.offsetTop;
var left = div.offsetLeft;
var moveNUM = 10;

if(e){
switch(e.keyCode){
case 37://←
div.style.left = left - moveNUM + "px";
break;
case 38://↑
div.style.top = top - moveNUM + "px";
break;
case 39://→
div.style.left = left + moveNUM + "px";
break;
case 40://↓
div.style.top = top + moveNUM + "px";
break;
}
}
};
</script>
<style>
html,body{
height:100%;
padding:0;
margin:0;
overflow:hidden
}
#container{
position:absolute;
top:40px;
bottom:0;
left:0;
right:0;
}
</style>
<body>
<div id="bg">
<img src="./map.png" width="auto" height="100%">
</div>
<div id="container">
<img src="./location.png" width="120px" height="160px">
</div>
</body>
</html>