0

这适用于左侧、右侧和顶部动画 div 从左侧、右侧和顶部移动，但不适用于底部 div 不能移动底部。并且当我快速按下键十次或更多次时，它会从我的窗口屏幕的每一侧向外移动，如果我在一个动画完成后按下键，它就不能向外移动。

我的html代码：

<body>
  <div class="block"></div>
</body>

我的CSS代码：

div {
  position: absolute;
  background-color: #abc;
  left: 50px;
  top:50px;
  width: 100px;
  height: 100px;
}

我的jQuery代码：

$(window).load(function(e) {
    $("body").keydown(function(e) {
    var width1 = $(window).width();
    var heigth1 = $(window).height();
    if(e.keyCode == 37) { // left
        if (parseInt($('.block').css('left')) >= 50) {     
            $('.block').animate({left: '-=50'},"slow");
        }
    }
    else if(e.keyCode == 39) { // right
        if (parseInt($('.block').css('left')) <= (width1 - 150)){     
            $(".block").animate({left: "+=50px"},'slow');
        }
    }
    else if(e.keyCode == 40){ // bottom
        if (parseInt($('.block').css('top')) <= (height1 - 150)) { 
            $(".block").animate({'top':'+=50px'},'slow');
        }
    }
    else if(e.keyCode == 38){ // top
        if (parseInt($('.block').css('top')) >= 50) {     
            $(".block").animate({'top':'-=50px'},'slow');
        }
    }
 });
});
4

2 回答 2

1

错字！

var heigth1 = $(window).height();

应该

var height1 = $(window).height();
于 2013-10-18T10:09:28.903 回答
1

有我的例子，希望对你有帮助:)

例子 

:)
于 2013-10-18T10:26:38.887 回答