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

标签 javascript jquery html css

这在左侧动画 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/

相关文章:

html - 如何在保持图像纵横比的同时增加图像高度

html - 为什么在两个 float 的 div 中只包含内容?

javascript - 避免 Veracode CWE-80 : Improper Neutralization of Script-Related HTML in jquery htm() method

javascript - 如何在 JavaScript 中迭代此 List 类的实例

javascript - 代码返回上次刷新之前的最新值而不是插入的最新值?

php - 如何使用datepicker、ajax、php、mysql生成两个日期之间的报告?

javascript/css 淡出

javascript - 通过 jQuery AJAX 设置和获取 PHP 变量

javascript - 为什么 jQuery keyup 重复触发?

javascript - 只有在父 div 中时才使用 innerHTML 选择类