<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img id="imgid" src="../image/45.jpg"/>
</body>
<script>
img=document.getElementById('imgid');
ys=0;
yv=10;
sx=0;
vx=10;
document.οnkeydοwn=function(event){
kc=event.keyCode;
switch(kc){
//左键
case 37:
sx-=vx;
img.style.left=sx+'px';
break;
//上
case 38:
ys-=yv;
img.style.top=ys+'px';
sx+=vx;
img.style.left=sx+'px';
ys+=yv;
img.style.top=ys+'px';
break;
}
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img id="imgid" src="../image/45.jpg"/>
</body>
<script>
img=document.getElementById('imgid');
ys=0;
yv=10;
sx=0;
vx=10;
document.οnkeydοwn=function(event){
kc=event.keyCode;
switch(kc){
//左键
case 37:
sx-=vx;
img.style.left=sx+'px';
break;
//上
case 38:
ys-=yv;
img.style.top=ys+'px';
break;
//右
case 39:sx+=vx;
img.style.left=sx+'px';
break;
//下
case 40:ys+=yv;
img.style.top=ys+'px';
break;
}
}
</script>
</html>