2

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

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

http://benthebodyguard.com/index.php

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

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

4

2 回答 2

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 库，这样的东西可以让您相对轻松地做一些很棒的事情......

于 2012-07-23T14:33:02.757 回答
1

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

$(document).ready(function(){

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

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

于 2012-07-23T14:33:15.790 回答