<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小人快跑</title>
<style type="text/css">
#imgs{
position: absolute;
left:200px;
top:50px;
}
</style>
</head>
<body>
<img src="images/11.png" id="imgs"/>
<script src="script.js"></script>
</body>
</html>
var imgs = document.getElementById("imgs");
var i = 0;
document.onkeydown = function(e){
var e = window.event || e;
switch(e.keyCode){
case 37: //左
imgs.style.left = imgs.offsetLeft - 10+"px";
run("2");
break;
case 38: //上
imgs.style.top = imgs.offsetTop- 10+"px";
run("4");
break;
case 39: //右
imgs.style.left = imgs.offsetLeft + 10+"px";
run("3");
break;
case 40: //下
imgs.style.top = imgs.offsetTop + 10+"px";
run("1");
break;
}
}
function run(value){
i++;
if(i > 9){
i = 1;
}
imgs.setAttribute("src","images/"+value+i+".png")
}