这与左,右和顶部动画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');
        }
    }
 });
});

最佳答案

有我的例子,希望我能帮到你:)

example

:)

关于javascript - div无法对底部进行动画处理,并且从每一侧都从窗口屏幕移出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19446928/

10-10 00:43
查看更多