gpt4 book ai didi

javascript - 调整浏览器屏幕大小弄乱了我的 div 的偏移量

转载 作者:行者123 更新时间:2023-11-28 13:55:49 24 4
gpt4 key购买 nike

我目前正在制作一款麻将游戏。游戏已经完成了。一切正常,直到我决定将游戏放入一个 div (div id="holder") 中以确保它在浏览器窗口中居中。

会发生什么?

第 1 步:调整浏览器窗口的大小,使其与游戏大小相匹配(因此左侧或右侧没有白色边框。注意:在顶部添加更多空间时也会出现此问题,但在此演示中它是无法对此进行调整。

第 2 步:单击:单击开始,游戏将开始,然后单击任何提示按钮。你会看到一个 nr 出现在你刚刚点击的按钮上方,它向上移动,然后消失。此 nr 位置正确,应始终出现在您单击的 HINT 按钮正上方的中间。

第 3 步:现在调整浏览器窗口的大小,给游戏(比方说)左右各留出 2 厘米的空白区域。

第 4 步:现在单击另一个提示按钮。请注意 nr 出现了,但不再出现在 HINT 按钮的中间和上方,而是向右 2 厘米。

那么发生了什么?我的猜测是包含 nr 的 div (div class="score") 的偏移量包括其偏移量的空白(或类似的东西)。

这显然是我不想要的!但我不知道如何解决这个问题......

一些代码片段:

DIV 的 CSS:

#holder {
width: 940px;
margin: auto auto;
}
.score {
display: none;
pointer-events: none;
position: absolute;
font-size: 1em;
text-align: center;
color:#FFF;
z-index: 1;
}

JS 部分(使用 jQuery):

var offset = $(this).hide(500).offset();
var penalty = Math.round(score * -0.10); //calculates a score penalty
score += penalty; //this is the result
$('.sc').text(score); //this is needed elsewhere in the script
$('.score') //start of showing the div and it's animation
.show()
.text(penalty)
.css({
top: offset.top - $('.score').height() - 90,
left: offset.left,
width:'3.5em'
})
.stop()
.delay(100)
.animate({top: offset.top - $('.score').height() - 140},700)
.hide(0);
...some more code here, not relevant to this

如果需要更多代码,请告诉我,但我认为这已经足够了。希望这个问题能够得到解决!

亲切的问候

最佳答案

在你的 holder css 添加 position:relative;

#holder {
width: 940px;
margin: auto auto;
position: relative;
}

看看是否能解决问题。

关于javascript - 调整浏览器屏幕大小弄乱了我的 div 的偏移量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10819029/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com