jq 按上下左右键移动元素位置

最新推荐文章于 2021-03-24 11:19:51 发布

lives-luo

最新推荐文章于 2021-03-24 11:19:51 发布

阅读量1.8k

点赞数 2

分类专栏： jq

本文链接：https://blog.csdn.net/qq_41299608/article/details/79591492

版权

jq 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>

<style>
* {
margin: 0;
padding: 0;
}

#test {
width: 20px;
height: 100px;
background: skyblue;
position: absolute;
bottom: 0;
}
</style>
</head>

<body>
<div id="test"></div>
<script>
$(document).keydown(function(event) {
var keyNum = event.which; //获取键值
var test = $('#test'); //要移动的元素
test.css({
position: 'absolute',
});
switch(keyNum) { //判断按键
case 37:
test.animate({
left: '-=100px'
});
break;
case 38:
test.animate({
top: '-=100px'
});
break;
case 39:
test.animate({
left: '+=100px'
});
break;
case 40:
test.animate({
top: '+=100px'
});
break;
default:
break;

}
});
</script>
</body>

</html>