<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#container div{
position: absolute;
left: 0px;
top: 0px;
width: 50px;
height: 50px;
background: blue;
opacity: 0.5px;
text-align: center;
line-height: 50px;
font-size: 24px;
color: #fff;
}
</style>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
var container = document.getElementById("container"),
oDiv = container.getElementsByTagName("div")
width = oDiv[0].offsetWidth;
for(var i=oDiv.length-1;1>=0;i--){
oDiv[i].style.left = (oDiv.length-1-i)*50+"px";
}
document.onkeydown = function(e){
var e = window.event || e;
switch(e.keyCode){
case 37:
oDiv[0].style.left = oDiv[0].offsetLeft-width+"px";
break;
case 38:
oDiv[0].style.top = oDiv[0].offsetTop-width+"px";
break;
case 39:
oDiv[0].style.left = oDiv[0].offsetLeft+width+"px";
break;
case 40:
oDiv[0].style.top = oDiv[0].offsetTop+width+"px";
break;
}
}
</script>
</body>
</html>
慕仙8527320
慕斯4360584
慕斯4360584
慕慕5436299
相关分类