jQuery的鼠標滾輪變焦（改變DIV的寬度）

Question

我希望能夠改變使用鼠標滾輪我的div的寬度。
我想這是很難做到的（至少對我來說很難），但我想也許有人曾經寫過這樣一個jQuery或JavaScript代碼。

把一些背景：這裏是我的網站的相關部分：http://jsfiddle.net/XGERP/1/
這裏是完整的website。我希望用戶決定#main div將會有多大。

Answer 1

下面是一些jQuery的胳肢你的想象。經測試可用於Chrome，Firefox和IE11。

$(document).ready(function(){ 
    $('#main').bind('wheel mousewheel', function(e){ 
     var delta; 

     if (e.originalEvent.wheelDelta !== undefined) 
      delta = e.originalEvent.wheelDelta; 
     else 
      delta = e.originalEvent.deltaY * -1; 

      if(delta > 0) { 
       $("#main").css("width", "+=10"); 
      } 
      else{ 
       $("#main").css("width", "-=10"); 
      } 
     }); 
    }); 

Answer 2

您可以使用jQuery變焦...

http://www.jacklmoore.com/zoom/

然後就像用戶徘徊，他們可以閱讀有點接近...

不知道它是否會與文本的工作，雖然，還沒有真正看過，

或者你可以做這樣的事情......

$('#main').mousewheel(function(event, delta) { 
var delta_px = delta > 0 ? "+=50" : "-=50"; 
$(this).css('width', delta_px); 
}); 

您需要的mousewheel擴展插件...

http://archive.plugins.jquery.com/project/mousewheel

繼承人的工作演示，鼠標滾輪腳本是高於一切，那麼你要實際的jQuery是在底部

DEMO HERE