javascript - 平滑地将字符移入和移出屏幕 HTML

Question

An Example of the problem

屏幕上随机出现一个 Angular 色。他从银幕外开始，然后平稳地移动到银幕上。但是我有一个问题，就是它移出屏幕。现在我用 jquery 将他放入 body 中。当它到达右侧时，我计划通过检查宽度并等待直到他完全超出屏幕(就在他超出屏幕之前，他的一半 body 应该被绘制)来移除他。问题是当他向右移动时宽度变大并且我看到出现滚动条。

如何使 Angular 色不影响宽度，将其 body 部分绘制(在右侧，左侧不是问题)并知道何时完全看不见？

Answer 1

function MoveCode(){
    var l = $('.ball').css("left");
    $('.ball').css("left", (parseInt(l) + 8) + "px");
    setTimeout(MoveCode, 160);
}

$('body').append('<div style="width:100%; overflow:hidden;"><img class="ball" src="http://michaelreid.typepad.com/.a/6a00e54edabd838833011168a00f09970c-800wi"/></div>');
MoveCode()

只需将图像包裹在 div 中，这样您就可以设置溢出:隐藏，而无需破坏页面。