Javascript 通过上下左右按键控制元素上下左右移动出问题了
以下是源码，只有上键和左键正常，右键和下键没有反应<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""htt...
以下是源码，只有上键和左键正常，右键和下键没有反应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#qqq {
position: absolute;
height: 10px;
width: 10px;
background-color: #0000FF;
left: 100px;
top: 500px;
right: 100px;
bottom: 100px;
}
.blue {
color: #0000FF;
}
-->
</style>
</head>
<script type="text/javascript">
top_position=10;left_position=10;right_position=10;bottom_position=10;
document.onkeydown=function(get_key){
var a = document.getElementById("qqq");
var key_pressed = event || window.event || arguments.callee.caller.arguments[0];
if(key_pressed && key_pressed.keyCode==38){//按下上建
top_position=top_position+10;
a.style.top=top_position+"px";
}
if(key_pressed && key_pressed.keyCode==37){//按下左建
left_position=left_position+10;
a.style.left=left_position+"px";
}
if( key_pressed.keyCode==39){//按下右建
right_position=right_position+10;
a.style.right=right_position+"px";
}
if(key_pressed && key_pressed.keyCode==40){//按下下建
bottom_position=bottom_position+10;
a.style.bottom=bottom_position+"px";
}
}
</script>
<body onkeypress="test();">
<div id="qqq"></div>
</body>
</html>
很奇怪啊，求大神帮忙 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#qqq {
position: absolute;
height: 10px;
width: 10px;
background-color: #0000FF;
left: 100px;
top: 500px;
right: 100px;
bottom: 100px;
}
.blue {
color: #0000FF;
}
-->
</style>
</head>
<script type="text/javascript">
top_position=10;left_position=10;right_position=10;bottom_position=10;
document.onkeydown=function(get_key){
var a = document.getElementById("qqq");
var key_pressed = event || window.event || arguments.callee.caller.arguments[0];
if(key_pressed && key_pressed.keyCode==38){//按下上建
top_position=top_position+10;
a.style.top=top_position+"px";
}
if(key_pressed && key_pressed.keyCode==37){//按下左建
left_position=left_position+10;
a.style.left=left_position+"px";
}
if( key_pressed.keyCode==39){//按下右建
right_position=right_position+10;
a.style.right=right_position+"px";
}
if(key_pressed && key_pressed.keyCode==40){//按下下建
bottom_position=bottom_position+10;
a.style.bottom=bottom_position+"px";
}
}
</script>
<body onkeypress="test();">
<div id="qqq"></div>
</body>
</html>
很奇怪啊，求大神帮忙 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
无标题文档
</title>
<style type="text/css">
#qqq {
position: absolute;
height: 100px;
width: 100px;
left: 100px;
top: 100px;
border: 1px solid blue;
text-align: center;
line-height:100px;
}
</style>
</head>
<script type="text/javascript">
document.onkeydown = function(event) {
var a = document.getElementById("qqq");
event = event || window.event;
var keyCode = event.keyCode;
var t = parseFloat(a.style.top) || a.offsetTop;
var l = parseFloat(a.style.left) || a.offsetLeft;
if(keyCode == 38) {//按下上建
a.style.top = t - 10 + "px";
}
else if(keyCode == 37) {//按下左建
a.style.left = l - 10 + "px";
}
else if(keyCode ==39) {//按下右建
a.style.left = l + 10 + "px";
}
else if(keyCode == 40) {//按下下建
a.style.top = t + 10 + "px";
}
}
</script>
<body>
<div id="qqq">
ddd
</div>
</body>
</html>
追问
解决了，非常感谢你啊，只需要设置上和左的属性就够了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
