Question

这是正常工作左边的动画div不能从左侧走出去但是它不能正常的div在窗口屏幕之外。

我的HTML代码：

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

我的css代码：

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

我的jquery代码

$("body").keydown(function(e) {
var width = $(window).width();
var heigth = $(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')) <= width) {     
        $(".block").animate({left: "+=50px"},'slow');

    }

}

});

提前感谢。

Answer 1

将当前left值与窗口宽度进行比较时，您不会添加将作为函数结果添加的50px，因此您将超出窗口的宽度。

您还应该考虑.block元素本身的宽度

//...
else if(e.keyCode == 39) { // right
    if ((parseInt($('.block').css('left')) + 50 + $('.block').width()) <= width) {     
        $(".block").animate({left: "+=50px"},'slow');

    }

}
//...

Answer 2

将一些代码改为@ lukiffer的答案。

//...
else if(e.keyCode == 39) { // right
    if (parseInt($('.block').css('left')) <= (width-150) ) {     
        $(".block").animate({left: "+=50px"},'slow');

    }

}
//...

在我的窗口屏幕外停止动画

2 个答案: