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

【问题标题】：jQuery scroll animate div across screen and backjQuery在屏幕上滚动动画div并返回
【发布时间】：2012-07-21 18:46:55
【问题描述】：

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

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

http://benthebodyguard.com/index.php

如果你看看我所做的，它只是转到某个点然后返回，我怎样才能让它沿着屏幕移动然后又返回..？

http://jsfiddle.net/VWqyw/2/

【问题讨论】：

标签： jquery scroll jquery-animate

【解决方案1】：

你可以这样做：

http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){

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

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

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

顺便说一句，如果您计划在页面上制作大量动画，则可能值得考虑使用像 KineticJS 这样的 JavaScript 库，这样可以让您相对轻松地做一些很棒的事情。 .

【讨论】：

【解决方案2】：

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

$(document).ready(function(){

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

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

【讨论】：