我目前正在制作一款麻将游戏。游戏和完整一样好。一切正常,直到我决定将游戏放入div(div id="holder"
)以确保它将在浏览器窗口中居中。
会发生什么?
第1步: 调整浏览器窗口的大小,使其与游戏大小相匹配(左侧或右侧没有白色边框。注意:此问题也适用于向顶部添加更多空间,但在此演示中,它是无法调整此。
第2步:
点击:Click to Start
,游戏将开始,然后点击任何提示按钮。你会看到一个nr出现在你刚刚点击的按钮上方,它会向上移动并消失。这个nr定位正确,应始终显示在您单击的HINT按钮上方的中间位置。
第3步: 现在调整浏览器窗口的大小,让游戏(比方说)左边和右边有2厘米的空白区域。
第4步: 现在单击另一个HINT按钮。注意nr正在出现,但不再出现在HINT按钮的中间和上方,而是在右边2cm处。
那发生了什么?我的猜测是包含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
如果需要更多代码,请告诉我,但我认为这已足够。希望这个问题能够解决!
亲切的问候
答案 0 :(得分:0)
在你的持有人css中添加职位:亲属;
#holder {
width: 940px;
margin: auto auto;
position: relative;
}
看看是否能解决问题。
答案 1 :(得分:0)
何时计算偏移量变量? 单击提示时应该存储它。
你从隐藏之前获取偏移量会发生什么?
var offset = $(this).offset()。hide(500);
答案 2 :(得分:0)
我想我已经找到了。在我的CSS中我有另一个div:
#s0 {
position: relative;
float: left;
height: 570px;
width: 760px;
background: #222 url('images/bg.png');
}
删除:position: relative;
似乎解决了这个问题。会做更多的测试。谢谢你的建议!