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 に答える