滚动时从左到右动画图像

Question

我想要做的是我有大约6个内嵌图像，我想在特定位置从左到右滑动，并停在那里为每个图像。 当scrool越过它们时，图像必须滑动。 我尝试了这个javascript（对于JS来说是全新的）

$(window).scroll(function(){
if($this.scrollTop()>300)
{
    $('.onfoot1').slideright();
}
function slideright(){
    var a = getElementsByClassName('.onfoot1');
    var stoppos = 100;
    if (parseInt(a.style.left)< stoppos )
    {
        a.style.left = parseInt(a.style.left) + 3 + "px";
        setTimeout(slideright , 1);
    }
 }
});

标记

<div class="onfoot1"></div>

CSS

div.onfoot1{
  content:url(../img/onfoot1.jpg);
  left:0;    
}

Answer 1

我为你的代码编写了一份工作考试： https ： //jsfiddle.net/hmzw9y65/

我在那里做了一些假设......你正在使用$(...)语法，所以我猜你正在使用JQuery。 JQuery有一个.animate（）函数应该可以解决这个问题（ http://api.jquery.com/animate/ ）。 此外，我猜你可能想让div的css位置固定，以便滚动时它保持在屏幕上。

编辑：我注意到你不希望你在屏幕底部的图像，但屏幕到达时动画。 更新了我的小提琴： https ： //jsfiddle.net/hmzw9y65/1/