2012-06-12 14 views
1

我发现水平视差 http://www.perandersen.no/sandbox/parallax/ 的唯一修改的这个很好的例子,我想提出它是使之从最右边而不是左边开始屏幕,但如果知道怎样做我不能那样工作如何在特定位置启动jQuery 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> 

有没有人知道我可以如何实现这一目标?

非常感谢,

+0

谢谢,我会看看 – jmysona

回答

1

由于最后一个项目有endid,只是通过与结束URL附加散列跳转到那里。

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

这就是说,你可以把它跳到那里使用已经页面加载所需的窗口onload事件过程中.scrollTo插件。

例子:

$.scrollTo('#end'); 


我做了这个jsFiddle包含作者的网站上面.scrollTo()是回答你的问题的单独添加

+0

非常感谢,这就是我一直在寻找的,再次感谢 – jmysona