Javascript 缩放后的绝对位置

我有带

class=“myDiv”

的div。我需要做这个逻辑：在鼠标上，我想在div的中间显示弹出窗口

为此，我有以下几点：

$(".myDiv").mouseover(function () {
  positionDiv($(this).position().left + $(this).width() / 2, $(this).position().top + $(this).height() / 2);
});

function positionDiv(xPosition ,yPosition ) {
  $("#popupWindow").css("left", xPosition + "px");
  $("#popupWindow").css("top", yPosition + "px");
  $("#popupWindow").show();
}

CSS：

.popupWindow{
  position:absolute;
  width:313px;
  height:383px;
  display:none;
}

.popupWindow{
 position:relative;
 width:313px;
 height:383px;
 display:none;
 }

将将弹出窗口定位在鼠标上方的div中间。在这一点上，一切都很好

但是，如果网站被放大（使用浏览器的缩放功能），位置将变得混乱。弹出窗口不再出现在<代码> MyDIV的中间。

知道有什么问题吗

编辑：

---

要了解更多信息，如果创建并缩放它，就可以了。但是当我将鼠标移动到另一个

myDiv

时，新的弹出窗口出现在一个奇怪的位置。Div的left和top属性搞乱了。

我有一个简单的css解决方案，如果你有一个高度和宽度已知的Div，你可以只借助css完成同样的任务

$(window).on('resize', function(){
    var $md = $('.myDiv');
    positionDiv($md.position().left + $md.width() / 2, $md.position().top + $(this).height() / 2);
});

.popupWindow {
    position:absolute;
    width:313px;
    height:383px;
    left:50%;
    top:50%;
    margin-left:-156px;/*half of width*/
    margin-top:-191px;/*half of height*/
    display:none;
}

---

您不需要JS来完成此操作：

关键是使用CSS并避免JS计算。容器div（myDiv）应为位置：相对，弹出窗口必须位于内部和位置：绝对，顶部和左侧为50%，并使用负边距将其居中（）

尽量避免使用JS，因为它是由浏览器渲染的，所以即使在缩放时，也只有CSS可以确保正确的位置

HTML

<div class="myDiv">
    Hi!
    <div class="popupWindow">you are welcome!</div>
</div>

使用复选框单击/点击/切换弹出窗口和一些淡入的奖励曲目：

更骇人的是：

更复杂的例子：

---

使用position:relative并尝试此操作。这将解决你的职位问题

$(".myDiv").mouseover(function () {
 positionDiv( $(this).width() / 2, $(this).height() / 2);
});

function positionDiv(xPosition ,yPosition ) {
 $("#popupWindow").css("left","-" + xPosition + "px");
 $("#popupWindow").css("top", "-" + yPosition + "px");
 $("#popupWindow").show();
}

CSS：

.popupWindow{
  position:absolute;
  width:313px;
  height:383px;
  display:none;
}

.popupWindow{
 position:relative;
 width:313px;
 height:383px;
 display:none;
 }

---

我理解您的问题，我的解决方案是将每个包含弹出窗口的对象放在pos relative中，然后使用以下CSS设置弹出窗口：

.myPopUp{
    position:absolute;
    display : none;
    width:400px;
    height : 100px;
    margin-top : -50px;
    margin-left:-200px;
    background-color: red;
    top : 50%;
    left: 50%;
}

它将永远居中

现在我知道所有可悬停div只有一个弹出窗口。我的技巧是将弹出窗口保存在var中，并将其从父容器中删除，然后将其附加到悬停div中，如下所示：

var popUp = $('.myPopUp');

$('.myDiv').mouseover(appendPopUp);
$('.myDiv').mouseout(function(){popUp.css('display', 'none')});

function appendPopUp(){
    console.log(popUp.parent(), $(this))
    if(popUp.parent()[0] != $(this)[0]){
        popUp.remove();
        $(this).append(popUp);
    }
    popUp.css('display', 'block')
}

---

这应该行得通，这是我的提琴：

您需要捕获

.resize（）

事件并引用您的函数。当它居中后放大或页面加载放大时，它是否会出错？否。如果它是“创建”且我放大它，则可以。但当我将鼠标移动到另一个myDiv时，新的弹出窗口以一种奇怪的方式出现position@Ohgodwhy你能告诉我怎么做吗？@Shikiryu myDiv仅用于这个问题：）当我更改函数中的顶部和左侧属性时会发生什么情况？在css中，首先用负边距的帮助可以补偿这种偏移。借助左边距和上边距，如果您想弹出窗口，可以调整屏幕上弹出窗口的位置。弹出窗口应始终位于窗口的中间，并将边距设置为高度和宽度的1/2。欲了解更多信息，请访问此URL抱歉，但我希望它是在中间的div不是窗口的，它也将与div，只是设置位置：相对；到popup div的父div，popup将与其父div居中。popup div用于多个div。当我将鼠标移到一个div上时，我需要将该div重新定位到悬停div。重新定位时，我将弹出div的“left”和“top”属性更改为位于悬停div的中心。在您的解决方案中，我无法更改弹出div的左侧和右侧。而且它不在我要将其居中的div内。希望我很清楚，我的问题不是在调整窗口大小之后。缩放后，所有内容都有正确的位置，但如果我将鼠标移到新计算的X和Y上，即使我指定同一div的X和Y，也会出错。您必须使用位置：relative。看看演示。在你的“更复杂的例子”中，在聊天泡泡出现之前，我在前5个像素处有很多抖动。这是不可避免的吗？像亚像素问题？