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

我想做的是从屏幕的右至左为小图像和div（或div中的图像）设置动画，在图像/div离开屏幕后重复

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

这就是我一直在做的

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

    moveTruck();

使用右边距值进行游戏。我的CSS类是：

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

---

尝试使用

window.innerWidth

、容器元素宽度的值设置

left

属性的动画

（功能fx（el）{
$（el.css（“左”，window.innerWidth）
.制作动画({
左：“-”+（window.innerWidth-$（el.width（）*2）
}，3000，“线性”，函数（）{
外汇（本）
})
}（$（“div”））

正文{
溢出：隐藏；
}
div{
宽度：50px；
高度：50px；
位置：绝对位置；
}
img{
背景：金；
宽度：50px；
高度：50px；
}

---

试试这个，这个卡车div重复地从右向左移动

HTML:

JS:

函数move（）{

move（）

试试这个，它会计算出对象和窗口的确切宽度——无论屏幕大小如何，都应该始终有效。你试图使用绝对像素值，但并不总是有效

---

制作演示以更好地解释您试图做什么。因为我们将要求您提供html代码以了解“#ImageToMove”是什么。因此，演示效果更好。值得注意的是，CSS转换（）可以实现同样的效果，一旦规范化，CSS动画将更容易实现同样的效果。

<div class="truck"></div>

body{
   background: green;
   overflow: hidden;
}

.truck {
   margin-top:20px;
   width: 272px;
   height: 174px;
   cursor:pointer;
   position: absolute;
   margin-right: -150px;
   z-index: 3;
   background: red;
   border-radius:4px;
   width:200px;
   height:50px;     
}

$(function() {   

    var moveTruck = function(){
        $(".truck").delay(2000).animate( {'right': '120%' }, 5000,'linear',function(){
            $(this).css({'right': '-50px'});
            moveTruck();
        });
    }
moveTruck();
})

width = $(window).width();
objectWidth = $('#demo').width();

margin = width + objectWidth + 'px';
restart = -100 - objectWidth + 'px';

$('#demo').animate({
    'margin-left': margin
}, 3000, function(){
  $('#demo').css('margin-left', restart);
    move();
});
 }