javascript - 如何连续从右向左移动图像/div？

Question

我想做的是从屏幕的右到左为一个小图像和一个 div(或一个 div 中的图像)制作动画，一旦图像/div 离开屏幕就会重复。

我在网上找到了一个从左到右移动图像/div 的示例，但不是一直移动到屏幕的另一边，我正在努力从右到左移动它。

这是我一直在做的事情

function moveTruck() {
        $("#ImageToMove").animate({
            "margin-right": "5000px"
        }, 3000, function () { $("#ImageToMove").css("margin-right", "10000"); moveTruck(); });
    }

    moveTruck();

使用 margin-right 值。我的 CSS 类是:

.HomeImageAnimate{
    position:absolute;
    margin-top:80px;
    right:1000px;
}

Answer 1

尝试使用 window.innerWidth 和容器元素宽度的值设置、动画化 left 属性

(function fx(el) {
  $(el).css("left", window.innerWidth)
    .animate({
      left: "-" + (window.innerWidth - $(el).width() * 2)
    }, 3000, "linear", function() {
      fx(this)
    })
}($("div")))

body {
  overflow: hidden;
}
div {
  width: 50px;
  height: 50px;
  position: absolute;
}
img {
  background: gold;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  <img />
</div>