JavaScript中用键盘实现控制小人上下左右移动：
浏览器实现效果：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘控制特效</title>
<style type="text/css">
#main{
position: absolute;
top: 0px;
left: 0px;
}
#main img{
display: block;
width: 250px;
height: 348px;
}
</style>
</head>
<body>
<div id="main">
<img src="D:\html\效果截图\person.jpg" alt="小人">
</div>
</body>
<script type="text/javascript">
sy=0;
vy=30;
sx=0;
vx=30;
document.onkeydown=function(event){
code=event.keyCode;
switch(code){
case 37:
//小人往左走左
sx-=vx;
main.style.left=sx+'px';
break;
case 38:
//小人往上走左
sy-=vy;
main.style.top=sy+'px';
break;
case 39:
//小人往右走左
sx+=vx;
main.style.left=sx+'px';
break;
case 40:
//小人往下走左
sy+=vy;
main.style.top=sy+'px';
break;
}
}
</script>
</html>
