Question

我正在尝试使用div来扩展div以始终填充视口; 目前我计算div是否离开，在视口中心的上方或下方，并相应地扩展。

如果可能的话，我希望div在视口中扩展到中心。 atm我正在调整边距以允许div横向扩展。但是如果扩展的div很大，它可以扩展通过视口一边，同时在另一边有足够的空间。这必须是在vannilla javascript中。我目前的代码如下：

function calculateExpandDir(el) {
    var ele = el.getBoundingClientRect();
    var windowH = window.innerHeight;
    var windowW = window.innerWidth;
    var expandDir = {}
    if (ele.left + (ele.width / 2) >= window.innerWidth / 2) { expandDir.horizontal = "left" } else { expandDir.horizontal = "right" }
    if (ele.top + (ele.height / 2) >= window.innerHeight / 2) { expandDir.vertical = "up" } else { expandDir.vertical = "down" }

    return expandDir
}

function expandEl(el) {
    var expandedHeight = parseFloat(el.getAttribute('data-height'));
    var expandedWidth = parseFloat(el.getAttribute('data-width'));
    var originalWidth = parseFloat(el.getAttribute('data-orig-width'));
    var originalHeight = parseFloat(el.getAttribute('data-orig-height'));

    var marginTop = 0;
    var marginRight = 0;
    var marginBottom = 0;
    var marginLeft = 0;
    var dir = calculateExpandDir(el)
    console.log("expand to " + dir.vertical + dir.horizontal)
    if (dir.horizontal == "right") {

    }

    if (dir.horizontal == "left") {
        marginLeft = -(expandedWidth - originalWidth);
    }

    if (dir.vertical == "up") {
        marginTop = -(expandedHeight - originalHeight)
    }

    if (dir.vertical == "down") {
    };

    el.style.position = "absolute";
    el.style.height = expandedHeight+"px";
    el.style.width = expandedWidth + "px";
    el.style.transition = "all 0.5s ease-in-out";
    el.style.marginTop = marginTop+"px";
    el.style.marginBottom = marginBottom+"px";
    el.style.marginLeft = marginLeft+"px";
    el.style.marginRight = marginRight+"px";
}

我想我必须计算div每一侧的空间数量，然后按比例将div扩展到可用空间的数量，这样它就会变为居中但我现在仍然坚持如何做到这一点

编辑： https://codepen.io/sereal_killer/pen/eGZaNo 在这个例子中，divs根据它们的位置而扩展。中心div是作弊，因为它具有数据属性，可以告诉它在两个方向上扩展。

我希望div扩展以填充屏幕，具体取决于可用的房间（它们具有最大高度和宽度）。如果我有一个居中的div，就像在示例中我希望它知道它在两侧都有相同的空间并且左右均匀扩展。如果它向右偏右一点，我希望它扩展到仍然居中。需要注意的是，它不能离开它的起源。它不能弹出，只是出现在中心。如果我有时间我会画一张照片

如何根据视口中的位置展开div

0 个答案: