0

这适用于左侧动画 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');

    }

}

});

提前致谢。

4

2 回答 2

4

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

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

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

    }

}
//...
于 2013-10-18T08:11:44.443 回答
0

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

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

    }

}
//...
于 2013-10-18T08:32:24.937 回答