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/

滚动时从左到右动画图像

1 个答案: