1:创建一个div,给其设置宽高背景颜色,并定位。
<div id="demo" style="width: 200px;height: 200px;background: red;position: absolute;">
2:在js中写样式。 <script>
document.onkeypress = function(ev){
switch(ev.keyCode){
case 119:
oDiv.style.top = oDiv.offsetTop-10+"px";
break;
case 115:
oDiv.style.top = oDiv.offsetTop+10+"px";
break;
case 97:
oDiv.style.left = oDiv.offsetLeft-10+"px";
break;
case 100:
oDiv.style.left = oDiv.offsetLeft+10+"px";
break;
}
}
</script>
<script>
document.onkeypress = function(ev){
switch(ev.keyCode){
case 119:
oDiv.style.top = oDiv.offsetTop-10+"px";
break;
case 115:
oDiv.style.top = oDiv.offsetTop+10+"px";
break;
case 97:
oDiv.style.left = oDiv.offsetLeft-10+"px";
break;
case 100:
oDiv.style.left = oDiv.offsetLeft+10+"px";
break;
}
}
</script>
3:在浏览器中运行:
119,115,97.100分别表示w,s,a,d的ASCII码,运行时按对应的键进行div的移动