在测试用鼠标点击按钮，使图片左右上下移动：
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 600px;
height: 400px;
margin: 100px auto 0;
background: pink;
position: relative;
}
img{
width: 60px;
height: 60px;
position: absolute;
top: 0px;
left: 0px;
}
table{
width: 120px;
height: 120px;
margin: 0 auto;
}
</style>
<script>
function move(num){
var mario = document.getElementById("mario");
var l = mario.style.left;//获取图片当前left值
var t = mario.style.top;//获取图片当前top值
l = Number(l.substr(0, l.length-2));//截取left值，去掉px 如果改成parseInt（）则会失效，详情继续往下看解决办法
t = Number(t.substr(0, t.length-2));//截取top值，去掉px
switch(num){
case 0:
mario.style.top = (t-10)+"px";
break;
case 1:
mario.style.left = (l+10)+"px";
break;
case 2:
mario.style.top = (t+10)+"px";
break;
case 3:
mario.style.left = (l-10)+"px";
break;
}
}
</script>
</head>
<body>
<div>
<img src="img.jpg" id="mario" alt=""/>
</div>
<table>
<tr>
<th colspan="3">点击移动图片</th>
</tr>
<tr align="center">
<td colspan="3"><input type="button" value="↑" onclick="move(0)"></td>
</tr>
<tr>
<td><input type="button" value="←" onclick="move(3)"></td>
<td>㊣</td>
<td><button onclick="move(1)">→</button></td>
</tr>
<tr align="center">
<td colspan="3"><input type="button" value="↓" onclick="move(2)"></td>
</tr>
</table> </body>
</html>
在上面如果我们吧Number（）改成parseInt（） 我们会发现失效了，鼠标点击图片不会移动，反而会报错。
如果我们想换成parseInt()那我们可以这样改
把img图形的样式改为内联样式：
<img src="img.jpg" id="mario" alt="" style="position: absolute;top: 0px;left: 0px;"/>
这样再把l = Number(l.substr(0, l.length-2)); 改为l = parseInt(l.substr(0, l.length-2));就不会报错了
为什么会这样呢：
是因为style只能获取内联样式，所以使用parseInt就不能实现。 键盘控制图片移动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 600px;
height: 400px;
margin: 100px auto 0;
background: pink;
position: relative;
}
img{
width: 60px;
height: 60px;
position: absolute;
top: 0px;
left: 0px;
}
table{
width: 120px;
height: 120px;
margin: 0 auto;
}
</style>
<script>
window.onload = function () {
document.onkeydown = function () {
var event = event || window.event;//浏览器兼容问题
var mario = document.getElementById("mario");
var l = mario.style.left;//获取图片当前left值
var t = mario.style.top;//获取图片当前top值
l = Number(l.substr(0, l.length-2));//截取left值，去掉px
t = Number(t.substr(0, t.length-2));//截取top值，去掉px
switch(event.keyCode){
case 38:
mario.style.top = (t-10)+"px";
break;
case 39:
mario.style.left = (l+10)+"px";
break;
case 40:
mario.style.top = (t+10)+"px";
break;
case 37:
mario.style.left = (l-10)+"px";
break;
}
}
}
function move(num){ }
</script>
</head>
<body>
<div>
<img src="img.jpg" id="mario" alt=""/>
</div> </body>
</html>