<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#pic{ width:135px; height:240px; position:relative;}
#pic img{width:135px; height:240px;}
</style>
</head>
<body>
<div id="pic">
<img src="123.JPG">
</div>
<script>
var pic=document.getElementById("pic")
/*键盘控制div左右上下移动*/
pic.onkeydown=function(event){
if(event.keyCode==37){/*左*/
pic.style.left=pic.offsetLeft-20+"px";
}
else if(event.keyCode==38){/*上*/
pic.style.top=pic.offsetTop-20+"px";
}
else if(event.keyCode==39){/*右*/
pic.style.left=pic.offsetLeft+20+"px";
}
else if(event.keyCode==40){/*下*/
pic.style.top=pic.offsetTop+20+"px";
}
}
</script>
</div>
</body>
</html>
Cassie_yu
相关分类