如何使用箭头键移动div
如何使用箭头键移动div
提问于 2011-02-10 05:20:22
回答 3
Stack Overflow用户
发布于 2013-10-07 23:07:09
@Šime Vidas:你的第一个解决方案太棒了。(我认为第二个是多余的=)
我可以建议将垂直宽度和水平宽度设置为两种不同的函数吗？因为你不太可能在一个完美的正方形中移动一个div，我相信最好能有这样的东西：
$(function () {
var pane = $('#pane'),
box = $('#box'),
wh = pane.width() - box.width(),
wv = pane.height() - box.height(),
d = {},
x = 5;
function newh(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > wh ? wh : n;
}
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > wv ? wv : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newh(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
});这正是我要找的。
如果您有一个基于%值的响应式设计，建议您像这样调整您的setInterval：
setInterval(function() {
box.css({
left: function(i,v) { return newh(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
wh = pane.width() - box.width();
wv = pane.height() - box.height();
}, 20);如果你这样做，它会调整你的窗格的高度和宽度，并且框仍然停留在它的边框上。
我在这里把它弄乱了，http://jsfiddle.net/infidel/JkQrR/1/
非常感谢。
Stack Overflow用户
发布于 2011-02-10 06:40:26
我看不到你的demo，但这里有一个简单的“向箭头键方向移动框1px”的例子：
CSS：
#wrapper {
background-color: gray;
height:200px;
width: 200px;
position:absolute;
}
#mover {
background-color: white;
border: 1px solid red;
height:20px;
width: 20px;
position:relative;
}标记：
<div id="wrapper">
<div id="mover"></div>
</div>JS (使用jQuery)：
$("#wrapper").keydown(function(event) {
var $mover = $("#mover");
//if nothing else will move "mover", then track the
//position instead of recalculating it every time:
// var moverPos = $mover.position();
// var left = moverPos.left;
// var top = moverPos.top;
var addTop = function(diff) {
$mover.css("top", ($mover.position().top + diff) + "px");
//if using tracked position:
// top += diff;
// $mover.css("top", top) + "px");
};
var addLeft = function(diff) {
$mover.css("left", ($mover.position().left + diff) + "px");
//if using tracked position:
// left += diff;
// $mover.css("left", left) + "px");
};
switch(event.keyCode) {
case 37: //left
addLeft(-1); break;
case 38: //up
addTop(-1); break;
case 39: //right
addLeft(1); break;
case 40: //down
addTop(1); break;
}
});这只是一个例子，你可能想要添加边界检查，更大的移动，更平滑的动画，数字键盘支持或其他任何数量的东西，但它应该让你开始。
Stack Overflow用户
发布于 2017-05-04 22:00:24
尝试此代码
<html>
<head>
<style>
#ss{
background:#ccc;
height:100px;
width:100px;
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<div id="ss"></div>
</body>
<script type="text/javascript">
var $div = $('#ss');
$(document).keydown(function(e) {
switch (e.which) {
case 37:
$div.css('left', $div.offset().left - 10);
break;
case 38:
$div.css('top', $div.offset().top - 10);
break;
case 39:
$div.css('left', $div.offset().left + 10);
break;
case 40:
$div.css('top', $div.offset().top + 10);
break;
}
})
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4950575
复制相关文章
相似问题
腾讯云开发者
