4

请帮助一个菜鸟。

我正在尝试创建一个 jQuery 函数，它将与窗口高度成比例地重新缩放和重新定位多个绝对定位的 div。

我已经包含以下代码来说明我想要达到的结果。数字 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 值。

如果有人知道一个插件可以满足我的要求，或者您是否可以指出我需要在代码中进行哪些更改以使我的要求成为可能，我将不胜感激。

... 编辑 ...

此解决方案使用.data来检索 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%;
}
4

1 回答 1

1

一种可能的解决方案是使用百分比而不是 px 来设置位置和高度。这样你就只使用 CSS 而不使用 javascript。

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

如果您不只使用百分比作为位置，此解决方案可能会出现问题（另请参阅有关灵活定位的文章）

如果你仍然想要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]);           
        });
    }); 
};
于 2012-06-07T09:27:13.380 回答