使用箭头键移动元素 jquery

Moving element with arrow keys jquery

本文关键字：移动 元素 jquery      更新时间：2023-09-26

谁能告诉我为什么这不起作用jsfiddle Code？

JavaScript：

$(document).ready(function() {
        $(document).live("keydown", KeyOperation);
});
function KeyOperation(e)
{
    alert("in");
    var top = $(".move").offset().top;
    var left = $(".move").offset().left;
    var IncrementBy = 10;
    if (e.which == 37) {
        $(".move").css({ left: left - 10 });
    }
    else if (e.which == 38) {
        $(".move").css({ top: top - IncrementBy });
    }
    else if (e.which == 39) {
        $(".move").css({ left: left + IncrementBy });
    }
    else if (e.which == 40) {
        $(".move").css({ top: top + IncrementBy });
    }
}​

.HTML：

<div class="move"></div>​

.CSS：

.move
{
    width: 100px;
    height:100px;
    border:1px solid red;
}​

假设问题是元素没有移动（你没有在你的问题中真正把问题说清楚），原因是元素的位置不正确。

将position: absolute或position: relative添加到您的 CSS 中。

这是一个更新的小提琴。

您需要删除代码中的alert函数，并将.live函数替换为.keydown函数。

相关文章：