通过键盘上下左右键控制div的移动,不知道问题出在哪,请大神看看呗

<!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>


Echo_Chien
浏览 1779回答 1
1回答

Cassie_yu

将onkeydown绑定在document上面...
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript