Mootools到jQuery轉換

Question

我想在我的網站上實現Vimeo網頁滾動/緩動效果（尋找太陽和雲）。 Vimeo使用Mootools來做到這一點，我想使用jQuery。我該怎麼做呢？

下面是需要被移植到jQuery的寬鬆政策的一部分（不知道這是允許張貼所以刪除這個如果不是）：

var scroller; 

window.addEvents({ 
'domready': function() { 

    var sun = new Element('img', { 
     'src': 'http://assets.vimeo.com/images/land_sun.gif', 
     'id': 'sun' 
    }).inject(document.body); 

    var cloud = new Element('img', { 
     'src': 'http://assets.vimeo.com/images/land_cloud.gif', 
     'id': 'cloud', 
     'styles': { 
      'position': 'fixed', 
      'z-index': '20', 
      'top': '48px', 
      'right': ((window.getWidth() - $('main').getCoordinates().right) - 65) + 'px' 
     } 
    }).inject(document.body); 

    var cloud2 = new Element('img', { 
     'src': 'http://assets.vimeo.com/images/land_cloud2.gif', 
     'id': 'cloud2' 
    }).inject(document.body); 

    var sun_style = new Fx.Style($('sun'), 'top', { 
     duration: 2500, 
     transition: Fx.Transitions.Quad.easeOut 
    }); 

    var cloud_style = new Fx.Style($('cloud'), 'top', { 
     duration: 2500, 
     transition: Fx.Transitions.Quad.easeOut 
    }); 

    var cloud2_style = new Fx.Style($('cloud2'), 'top', { 
     duration: 2500, 
     transition: Fx.Transitions.Quad.easeOut 
    }); 

    scroller = function() { 
     var distance = (window.getScrollTop()/(window.getScrollHeight() - window.getHeight())); 
     sun_style.stop().start($('sun').getCoordinates().top, (0 - (distance * 275))); 
     cloud_style.stop().start($('cloud').getCoordinates().top, (48 - (distance * 300))); 
     cloud2_style.stop().start($('cloud2').getCoordinates().top, (325 - (distance * 425))); 
    } 

    scroller.periodical(100); 
} 
}); 

Answer 1

明白了！

$(document).ready(function(){   
    var scroller = function() { 
     var distance = ($(window).scrollTop()/($(document).height() - $(window).height())); 

     $("#floating_1").stop().animate({ 
      "top": (300 - (distance * 500)) 
     }, 2500, "easeOutQuad"); 

     $("#floating_2").stop().animate({ 
      "top": (5 + (distance * 100)) 
     }, 2500, "easeOutQuad"); 

     $("#floating3").stop().animate({ 
      "top": (0 + (distance * 220)) 
     }, 2500, "easeOutQuad"); 

    }   
    setInterval(scroller,100); 
});