我目前正在制作麻将游戏。游戏是完整的。一切正常,直到我决定将游戏放在div(div id="holder"
)中,以确保它将在浏览器窗口中居中。
会发生什么?
第 1 步:调整浏览器窗口的大小,使其与游戏大小相匹配(因此左侧或右侧没有白色边框。注意:在顶部添加更多空间时,该问题也适用,但在此演示中无法调整。
第 2 步:点击:Click to Start
,游戏将开始,然后单击任何提示按钮。您将看到一个 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-part(使用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
如果需要更多代码,请告诉我,但我认为这就足够了。希望这个问题能解决!
亲切问候
持有者 css 中添加位置:相对;
#holder {
width: 940px;
margin: auto auto;
position: relative;
}
看看是否可以解决它。
何时计算偏移变量?单击提示时应存储它。
你从隐藏之前取偏移会怎样?
var offset = $(this).offset().hide(500);
我想我已经找到了。在我的 CSS 中,我还有另一个div:
#s0 {
position: relative;
float: left;
height: 570px;
width: 760px;
background: #222 url('images/bg.png');
}
删除:position: relative;
似乎修复了它。会做更多的测试。都感谢您的建议!