当浏览器窗口大小随 js 和 jQuery 发生变化时，如何相应地调整所有 div 的大小/缩放/重新定位？

Question

您好，我目前有一个非常简单的网站。它由一个全帧的背景图片和一个容器 div 组成...背景图片是动态居中的，并使用 css 规则放置，如下所示：

html {
    background: url(../images/hotel_room.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这对我来说似乎效果很好，并且可以使背景图像以一种“响应式”的方式定位，这正是我想要的！

我还有一个全宽的容器 div，其位置如下：

#mega_wrap{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width:100%;
}

接下来我有一些简单的 jQuery，它使用 onClick 根据鼠标单击时的位置将 div 附加到 #mega_wrap 容器......就像这样：

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable({
                handles: 'all'
            }); 

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>");
        var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>");

            eleHandleNE.appendTo(ele);
            eleHandleSE.appendTo(ele);
            eleHandleSW.appendTo(ele);
            eleHandleNW.appendTo(ele);

        //Append new div to the container div called mega_wrap
        $("#mega_wrap").append(ele);

   }); 
});

注意：所有的 div 都可以在所有角落调整大小并且可以使用 jQuery 拖动......所以 div 可以是任何大小和容器内的任何位置#mega_wrap ......这就是我的问题开始：

我正在寻找一种方法来使用每个 div 的某种变量来跟踪所有附加 DIVS 的位置？！使用javascript或jquery？？然后，如果/当调整 div 的大小或在容器周围拖动时，我需要能够更新该变量！

最后...当调整窗口大小时，我需要将 div 调整到它们在背景图像上的确切旧位置...所以每个 div 都会根据窗口以锁定的比例适当缩放（向上或向下）大小？！？

注意：认为我可能必须根据所提供的解决方案对背景图像进行不同的处理？接受建议....可能从 .css 更改为 .js 或 php？

非常感谢您的帮助.... TIY

Answer 1

我通常为每个 div 添加一个属性：

var eleHandleNE = '<div class="ww xx yy" id="zz" iniWidth="100" iniHeight="200">';

稍后，当 $(window).resize(...) 触发（或您正在使用的任何内容）时，查找属性并对其进行缩放：

$(this).width($(this).attr('iniWidth')*ratio);
$(this).height($(this).attr('iniHeight')*ratio);

顺便说一句，不要悬疑（尤其是因为我建议添加非标准属性标签），但您的 id 应该都是唯一的。如果是，另一种选择是创建一个对象数组来存储所有初始数据。然后，您可以使用数组和 id 来检索/设置您的值：

//initial div's attrs
divArray = new Array({id:'#id0',width:100,height:200},{id:'#id1',width:50,height:90});
...
//adding another div later
divArray[divArray.length] = {id:'#id2',width:300,height:500};

//Resize stuff...
function resizeStuff(divArray,ratio) {
  for(i=0;i<divArray.length; i++) {
    $(divArray[i].id).width((divArray[i].width*ratio);
    $(divArray[i].id).height((divArray[i].height*ratio);
  }
}