1

我发现了这个水平视差的好例子 http://www.perandersen.no/sandbox/parallax/ 我想做的唯一修改是让它从屏幕的最右边而不是左边开始,但我不能工作如果出来怎么做

这是使用的Jquery函数

<script type="text/javascript">
    var snowboarderPos;
    var balloonPos;

    $(document).ready(function() {
        $("#beginningLink").click(function() {
            $.scrollTo(0,0, {duration: 2000});
        });
        $("#avalancheLink").click(function() {
            $.scrollTo(2000,0, {duration: 2000});
        });
        $("#elevatorLink").click(function() {
            $.scrollTo(4400,0, {duration: 2000});
        });
        $("#wolfLink").click(function() {
            $.scrollTo(7000,0, {duration: 2000});
        });
    });

    $(window).load(function() {
        snowboarderPos = $("#snowboarder").offset();
        balloonPos = $("#ballong").offset();
        window.onscroll = scroll;
        hideScreen();

    });

    function hideScreen() {
        $("#loadingWrap").fadeOut("slow");
        //$('html,body').animate({scrollLeft: $("#info2").offset().top},'slow');

        $("#snowboarder").animate({"top": "-=200px"}, "slow");
        $("#info1").delay(500).animate({"left": "-=200px", "width" : "350px", "fontSize" : "24px"}, "slow");
    }

    function scroll()
    {
        var xPos = window.pageXOffset;
        var element = $("#wrapper");
        var newXPos = Math.abs(xPos /1.1);
        element.css( "left", newXPos );

        element = $("#snowboarder");
        var position = element.position();
        var newXPos = Math.abs(xPos /1.5) + snowboarderPos.left;
        element.css( "left", newXPos );

        element = $("#elevator");
        var position = element.position();
        var newXPos = Math.abs(xPos /1.9) + 2800;
        element.css( "left", newXPos );

        var element = $("#ballong");
        var position = element.position();
        var newXPos = Math.abs(xPos /1.2) + balloonPos.left;
        element.css( "left", newXPos );

        // $("#xpos").text(window.pageXOffset);
    }
</script>

有谁知道我怎么能做到这一点?

非常感谢,

4

1 回答 1

1

由于最后一项具有idof end,因此只需通过在 URL 末尾附加哈希来跳转到那里。

示例:
http ://www.perandersen.no/sandbox/parallax/#end

也就是说,您可以在窗口加载期间使用已经需要的.scrollTo插件在页面加载时跳转到那里。

例子:

$.scrollTo('#end');


I made this jsFiddle that contains the authors website with the single addition of the above .scrollTo() that answers your question.

于 2012-06-12T01:21:17.780 回答