本章节分享一段代码实例，它实现了使用方向键控制元素移动的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
margin: 0;
padding: 0;
}
.small {
position: absolute;
}
.posi {
position: relative;
height: 400px;
overflow: hidden;
margin: 20px;
}
.small {
left: 100px;
top: 200px;
width:100px;
height:100px;
background:#ccc;
}
</style>
</head>
<body>
<div class="posi">
<div id="move" class="small"></div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).keydown(function (e) {
switch (e.which) {
case 37: $('.small').css('left', '-=10');
break;
case 38: $('.small').css('top', '-=10');
break;
case 39: $('.small').css('left', '+=10');
break;
case 40: $('.small').css('top', '+=10');
break;
}
});
})
</script>
</body>
</html>
上面的代码实现了我们的要求，代码非常简单，更多内容参阅相关阅读
相关阅读:
（1）.keydown事件可以参阅jQuery keydown事件一章节。
（2）.which可以参阅jQuery event.which一章节。
（3）.switch语句可以参阅javascript switch语句一章节。
方向键控制元素移动代码实例，这样的场景在实际项目中还是用的比较多的，关于方向键控制元素移动代码实例就介绍到这了。
方向键控制元素移动代码实例属于前端实例代码，有关更多实例代码大家可以查看。
本文地址： http://www.zzsi.net/code/web/98643.html
本站部分资源来源与网络，仅供学习参考使用，请勿商用，如侵犯了您的权益，请联系我们删除。
上一篇: jQuery事件_动力节点Java学院整理
下一篇: 根据鼠标的方位出现遮罩层效果代码实例
