这在左侧动画 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');
}
}
});
提前致谢。
最佳答案
将当前 left
值与窗口宽度进行比较时,您没有添加将作为函数结果添加的 50px,因此您将超出窗口宽度。
您还应该考虑 .block
元素本身的宽度
//...
else if(e.keyCode == 39) { // right
if ((parseInt($('.block').css('left')) + 50 + $('.block').width()) <= width) {
$(".block").animate({left: "+=50px"},'slow');
}
}
//...
关于javascript - 在我的窗口屏幕外停止动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19444554/