jQuery - 根據窗口高度按比例縮放多個div的功能

Question

請幫助noob out。

我想創建一個jQuery函數，將重新調整和重新定位多個絕對定位divs與窗口高度成比例。

我已經包含下面的代碼來說明我試圖實現的結果類型。 數字960表示頁面上任何div的最大高度（以像素爲單位）。所以當調整大小時，960應該等於窗口高度的100％。

對於變量：divHeight，divLeft和divTop我已經手動輸入了它們的值，因爲我不知道如何從css中檢索它們的值，然後在調整窗口大小時恢復這些原始值，以便函數不是根據新值計算div高度和位置。

function scaleDivs() { 
    var winHeight = $(window).height(); 
    var divHeight = 348; 
    var divLeft = 40; 
    var divTop = 100; 
    var percentDif = (winHeight/960) * 100; 
    var newHeight = (percentDif/100) * divHeight; 
    newHeight = parseInt(newHeight) + "px"; 
    var newLeft = (percentDif/100) * divLeft; 
    newLeft = parseInt(newLeft) + "px"; 
    var newTop = (percentDif/100) * divTop; 
    newTop = parseInt(newTop) + "px"; 
    $("#panel_0").css({"height": newHeight, "left": newLeft, "top": newTop}); 
} 

$(document).ready(function() { 
    scaleDivs(); 
    $(window).bind('resize', scaleDivs); 
}); 

我想要的是一個函數來控制多個div - 自動獲得所需的css值。

如果有人知道我所要求的插件，或者如果你能指出我需要在我的代碼中進行更改以使我所要求的可能，我將不勝感激。

---

......編輯...

該解決方案使用。數據來檢索的div高度和位置的初始值。

jQuery的

function scalePanels() { 
    var winHeight = $(window).height(); 
    var ratio960 = winHeight/960; 
    $(".panelCont").each(function(){ 
     var panelHeight = $(this).data("initial-height"); 
     var newHeight = panelHeight * ratio960; 
     newHeight = parseInt(newHeight) + "px"; 
     var panelTop = $(this).data("initial-top"); 
     var newTop = panelTop * ratio960; 
     newTop = parseInt(newTop) + "px"; 
     var panelLeft = $(this).data("initial-left"); 
     var newLeft = panelLeft * ratio960; 
     newLeft = parseInt(newLeft) + "px"; 
     $(this).css({"height": newHeight, "top": newTop, "left": newLeft}); 
    }); 

}; 

$(document).ready(function() { 
    scalePanels(); 
    $(window).bind('resize', scalePanels); 
}); 

HTML

<div class="group_1"> 
    <div class="panelCont" id="pnl_0a" 
    data-initial-height= "960" 
    data-initial-left= "0" 
    data-initial-top= "0"> 
    <img src="images/pnl_0a.jpg" /> 
    </div> 
    <div class="panelCont" id="pnl_0_title" 
    data-initial-height= "97" 
    data-initial-left= "186" 
    data-initial-top= "26"> 
    <img src="images/pnl_0_title.svg" /> 
    </div> 
    <div class="panelCont" id="pnl_0b" 
    data-initial-height= "960" 
    data-initial-left= "0" 
    data-initial-top= "0"> 
    <img src="images/pnl_0b.jpg" /> 
    </div> 
</div> 

CSS

body { 
    margin: 0 auto; 
    background-color: #000; 
    overflow-y: hidden; 
} 
#pnl_0a { 
    margin: 0px; 
    width: auto; 
    position: absolute; 
    z-index: 2; 
} 
#pnl_0_title { 
    margin: 0px; 
    width: auto; 
    position: absolute; 
    z-index: 4; 
} 
#pnl_0b { 
    margin: 0px; 
    width: auto; 
    position: absolute; 
    z-index: 3; 
} 
img { 
    margin: 0px; 
    width: auto; 
    height: 100%; 
} 
object { 
    margin: 0px; 
    height: 100%; 
} 

Answer 1

一種可能的解決方案是使用百分比代替px來設置位置和高度。這樣你就只能使用CSS沒有JavaScript。

#panel_0 { 
    height: 36%; 
    left: 7%; 
    top: 11%; 
} 

，如果你不使用只百分比位置這種解決方案可能是有問題的（另見this文章關於靈活定位）

，如果你想的JavaScript反正你可以嘗試這樣的事情（雖然未經測試，所以要小心）：

function adjust(wrapper){ 
    var wrapperHeight = $(wrapper).height(); 
    var wrapperWidth = $(wrapper).width(); 
    var elementArr = []; 

    // create location index for all the elements inside the wrapper 
    $.each($(wrapper).children('.adjustable'),function(key,value){ 
     var percLeft = $(value).css('left')/wrapperWidth; 
     var percTop = $(value).css('top')/wrapperHeight; 
     var percHeight = $(value).height()/wrapperHeight; 

     var elem = [value,percLeft,percTop,percHeight]; 
     elementArr.push(elem); 
    }); 

    $(document).resize(function(){   
     $.each(elementArr, function(key,value){ 
      $(value[0]) 
       .css('left', $(value[0]).css('left') * value[1]) 
       .css('top',$(value[0]).css('top') * value[2]) 
       .height($(value[0]).height() * value[3]);   
     }); 
    }); 
};