5

所以我有一个你用箭头键移动的 div，但是我怎样才能使它不能超出“边界 div”？

$(document).ready(function(){
  $(document).keydown(function(e) {
      switch (e.which) {
      case 37: // Left
        $("#cube").css("left", $("#cube").offset().left - 101);
        break;
      case 38: // Up
        $("#cube").css("top", $("#cube").offset().top - 11);
        break;
      case 39: // Right
        $("#cube").css("left", $("#cube").offset().left - 97);
        break;
      case 40: // Down
        $("#cube").css("top", $("#cube").offset().top - 7);
        break;
      }
  });
});

http://jsfiddle.net/SfKHN/

4

3 回答 3

2

给你：-我在 FF 和 Chrome 中测试过，似乎还不错....

演示

可能这并不完全完美，但您可以在此基础上进行构建。这里的关键是获取父级的边距，并确保立方体的左/右/上/下不会超出它。还应考虑边框宽度。另一件事是您的 Step 应该是其宽度/高度的倍数（因为它是正方形）

$(document).ready(function(){
    $(document).keydown(function(e) {
        var cube = $("#cube");
        var leftMargin = 0;
        var rightMargin = $('#outside').position().left + $('#outside').width() - cube.width();
        var topMargin =0;
        var bottomMargin = $('#outside').position().top + $('#outside').height() - cube.height();
        switch (e.which) {
        case 37: // Left
                var newLeft = parseInt(cube.position().left - 50);
               if(leftMargin <= newLeft)
                {
                    cube.css("left", newLeft);
                }
            break;
        case 38: // Up
                var newTop = parseInt(cube.position().top - 50);
                if(topMargin <= newTop)
                {
                    cube.css("top",newTop);
                }
            break;
        case 39: // Right
                var newRight = (cube.position().left + 50);
                 if(rightMargin > newRight)
                {
                    cube.css("left", newRight);
                }
            break;
        case 40: // Down
                var newBottom = parseInt(cube.position().top + 50);
                if(bottomMargin > newBottom)
                {
                    cube.css("top", newBottom);
                }
            break;
        }
    });
});
于 2013-05-05T02:19:52.543 回答
0 
$(document).ready(function () {
    var $out  = $('#outside'),
        w     = $out.width(),
        $cube = $('#cube'),
        cw    = $cube.outerWidth();

    $(document).up(function (e) {
        switch (e.which) {
            case 37:
                $cube.css('left', function (_, left) {
                    left = parseInt(left, 10);
                    if (left !== 0) return left - cw;
                });
                break;
            case 38:
                $cube.css('top', function (_, top) {
                    top = parseInt(top, 10);
                    if (top !== -1) return top - cw;
                });
                break;
            case 39:
                $cube.css('left', function (_, left) {
                    left = parseInt(left, 10);
                    if (left + cw < w) return left + cw;
                });
                break;
            case 40:
                $cube.css('top', function (_, top) {
                    top = parseInt(top, 10);
                    if (top !== 349) return top + cw;
                });
                break;
        }
    });
});

http://jsfiddle.net/QmBNC/

于 2013-05-05T02:17:30.393 回答
0

您添加简单的 if 语句以确保您没有通过边界。这是一个例子：

$(document).ready(function(){
    $(document).keydown(function(e) {
        switch (e.which) {

            case 38: // Up
                if( ( $("#cube").offset().top - 11 ) >= 0 )
                    $("#cube").css("top", $("#cube").offset().top - 11);
                break;

            case 40: // Down
                if( ( $( "#cube" ).offset( ).top - 7 ) < ( 400 - 50 ) )
                    $("#cube").css("top", $("#cube").offset().top - 7 );
                break;
        }
    });
});

您将对左右箭头进行类似的更改

于 2013-05-05T01:39:32.003 回答