Question

我正在尝试重新创建我在另一个网站上看到的东西Ben the Bodyguard，我只是想知道它是如何完成的，我理解它是某种循环，但我不确定如何去做。< / p>

基本上，这是火车穿过屏幕的部分..

如果你看看我做了什么，它只是走到某一点然后回来，我怎么能得到它所以它沿着屏幕然后再回来......？

Answer 1

你可以这样做：

$(document).ready(function(){

    var windowWidth = $(window).width();    
    $("#block").css({ "left": windowWidth}); 

    $(window).scroll(function(){       
        $("#block").css({ "left":  windowWidth  - $(window).scrollTop()});
    });
});

基本上只使用垂直滚动位置来调整块的水平位置。

顺便说一下，如果你计划在页面上做很多动画，可能值得考虑使用像KineticJS这样的javascript库，这样的东西可以让你相对容易地做一些很棒的事情...

Answer 2

我相信你正在寻找这样的东西：

$(document).ready(function(){

    $(window).scroll(function(){
        if($(window).scrollTop() > 480 && $(window).scrollTop() < 900){
             $("#block").css({ "left": $(window).scrollTop() - 480 });
        };      
    });
});

这会将元素相对于给定范围内页面的滚动位置进行定位

jQuery在屏幕上滚动动画div并返回

2 个答案: