您的位置：首页 > 其它

[封装插件]键盘录入可上下左右移动的元素

2018-01-09 13:13 330 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试标题</title>
<style>
#divid{
width: 100px;
height: 100px;
background:red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>

<div id="divid">
</div>

<script type="text/javascript">

//定义三个值
var x = 100;    //x表示横坐标
var y = 100;    //y表示纵坐标
var v = 10;     //v表示每次变动的值,也可以直接在给坐标赋值时直接加数值

document.onkeydown =  function(event){
//获取需要改变的标签对象
var divobj = document.getElementById("divid");

//获取键盘输入键位的代表数字
var keyobj = event.keyCode;

switch(keyobj){
//匹配到38数字的代表值为左箭头
case 37:
//把x坐标进行改变,加上每次运动的值
x += -v;
//然后把进行加减操作后的x值赋值给元素对象的纵坐标
divobj.style.left = x+"px";
//匹配结果结束
break;

//以下同理
case 38:
y += -v;
divobj.style.top = y+"px";
break;
case 39:
x += v;
divobj.style.left = x+"px";
break;
case 40:
y += v;
divobj.style.top = y+"px";
break;
}

}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航