滾動時從左到右動畫圖像

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/