jQuery的窗簾滾輪應用

Question

我試圖建立一個窗簾滑塊 - 就像什麼是在蘋果網站上使用 - http://www.apple.com/30-years/

http://jsfiddle.net/NYEaX/405/

我創建了以下代碼 - 我需要添加偵聽器來檢測鼠標懸停在頁面的最左側/最右側 - 然後調用指數幻燈片。

var curtainSlider = { 
    invoke: function(el){ 
     var that = this; 

     var list = $(el + " ul").find("li"); 
     this.initialListWidth = list.outerWidth(true); 

     list 
      .mouseover(function() { 
       console.log("over"); 
       that.expand(this); 
      }) 
      .mouseout(function() { 
       console.log("out"); 
       that.contract(this); 
      });   
    }, 
    expand: function(el){ 
     var that = this; 

     $(el).stop().animate({ 
      width: that.initialListWidth*2 
     },400, function() { 
      // Animation complete. 
     }); 
    }, 
    contract: function(el){ 
     var that = this; 

     $(el).stop().animate({ 
      width: that.initialListWidth 
     },400, function() { 
      // Animation complete. 
     }); 
    } 

} 


$(document).ready(function() { 
    console.log("ready!"); 

    curtainSlider.invoke("#curtain"); 
}); 

Answer 1

**最新的代碼 - 完全整合 - http://jsfiddle.net/NYEaX/538/ **

我已經穩定這個版本的滾動的。 - 這些圖像和頻譜會在啓動時淡化它們。它重新定位一個元素，使圖像更集中對齊。

http://jsfiddle.net/NYEaX/432/

我已經分離出負責移動滑塊單元，用加速/減速的代碼。它是我現在要關注的應用程序的這一部分。

http://jsfiddle.net/NYEaX/434/

我試圖在pageX屬性變量推入動畫部件，以幫助操縱動畫的持續時間。這怎麼能夠穩定/改善。我發現很難對蘋果30年的滑蓋進行逆向工程。

var curtainSlider = { 
    bindEvents: function(){ 
     var that = this;  
     $("body").on("mousemove",function(event) { 
      if (event.pageX < 50) { 
       // animate curtain left 
       console.log("curtain left"); 
       that.scroll("l", event.pageX); 
      } 

      if (event.pageX > (window.width - 50)) { 
       // animate curtain right 
       console.log("curtain right");     
       that.scroll("r", window.width - event.pageX); 
      } 
     });  

    }, 
    scroll: function(direction, leveler){ 
     var charge = "-"; 
     if(direction == "r"){ 
      charge = "+"; 
     } 

     $('#curtainholder #slider').animate({ 
      left: charge+"="+leveler 
     },400, function() { 
      // Animation complete. 
     }); 
    }, 
    invoke: function(el){ 
     var that = this; 
     this.bindEvents(); 
    } 
} 


$(document).ready(function() { 
    curtainSlider.invoke("#curtain"); 
});