Question

我想要做的是从屏幕的右侧到左侧为小图像以及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;
}

Answer 1

尝试使用.container { display: flex; flex-wrap: wrap; }的值设置动画left属性，容器元素宽度

window.innerWidth

(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;
}

Answer 2

试试这个，这辆卡车div从右到左反复出现。

HTML：

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

CSS：

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;     
}

JS：

$(function() {   

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

CODEPEN DEMO

Answer 3

function move（）{

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();
});
 }

移动（）;

尝试这一点，它计算对象和窗口的确切宽度 - 无论屏幕大小如何，都应该始终有效。您试图使用绝对像素值，并不总是有效。

https://jsfiddle.net/w9pgmm9d/3/

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

3 个答案: