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

简介

做了这样一个小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>

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页