<!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>
添加回答
举报
0/150
提交
取消