Question

请帮助一个菜鸟。

我正在尝试创建一个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%;
}

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]);           
        });
    }); 
};

jQuery - 与窗口高度成比例缩放多个div的函数

1 个答案: