創建和「縮小」通過鼠標滾輪網頁

Question

我在尋找類似的體驗到AutoCAD？或SolidWorks

基本內容大小範圍之內驅動的「放大」（保持縱橫比） XSIZE * YSIZE

，並放大特定區域

和我已經包含的Ruby/Rails爲我的選擇

Answer 1

看一看的http://html5readiness.com/源代碼的語言。你可以在中心部分做到這一點。

這是從保羅愛爾蘭HTML5Readiness網站複製：

jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) { 

    var newval, 
     num = $('div.css-chart p').css('padding-left'); 

    delta = delta || e.detail || e.wheelDelta; 

    if (delta > 0 || e.which == 38) { 
     newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1); 
    } else if (delta < 0 || e.which == 40) { 
     newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1); 
    } else { 
     return true; 
    } 

    $('style.padleft').remove(); 
    $('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; } div.css-chart p i { width : '+2*newval+'px; } </style>') 
     .appendTo(document.body); 

    e.preventDefault(); 
}); 

Answer 2

另一種選擇是Zoom.js（http://lab.hakim.se/zoom-js/），其放大在指定元件上，或者Presenteer.js（http://willemmulder.github.com/Presenteer.js/），其可以指定居中在元件視口並且還考慮了這些元素的CSS3變換（例如旋轉，平移）。