调整浏览器屏幕大小会搞乱我的div偏移量

时间:2012-05-30 15:06:37

标签: javascript jquery css offset

我目前正在制作一款麻将游戏。游戏和完整一样好。一切正常,直到我决定将游戏放入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

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

亲切的问候

3 个答案:

答案 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;似乎解决了这个问题。会做更多的测试。谢谢你的建议!