<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.17通过键盘事件控制元素移动</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$(document).keyup(function(event){
//控制向右移动
if($('#div2').offset().left<300){
if(event.keyCode==39){
$('#div2').css('left','+=10');
}
}
//控制向左移动
if($('#div2').offset().left>0)
{
if(event.keyCode==37){
$('#div2').css('left','-=10');
}}
//控制向上移动
if($('#div2').offset().top>0)
{
if(event.keyCode==38){
$('#div2').css('top','-=10');
}
}
//控制向下移动
if($('#div2').offset().top<300)
{
if(event.keyCode==40){
$('#div2').css('top','+=10');
}
}
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:400px;
height:400px;
position:relative;
background-color:#CCC;
}
#div2{
width:100px;
height:100px;
background-color:#F96;
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
效果图
单击方向键调整方块位置
