0

我目前正在创建一个麻将游戏。游戏和完整一样好。一切正常，直到我决定将游戏放在 div ( div id="holder") 中以确保它在浏览器窗口中居中。

发生什么了？

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

第二步： 点击：Click to Start，游戏开始，然后点击任意提示按钮。您将看到一个 nr 出现在您刚刚单击的按钮上方，它向上移动，然后消失。这个 nr 的位置是正确的，并且应该总是出现在你点击的 HINT 按钮上方的中间。

第 3 步： 现在调整浏览器窗口的大小，在游戏（假设）左右各留出 2 厘米的空白区域。

第 4 步： 现在单击另一个提示按钮。注意 nr 出现了，但不再出现在 HINT 按钮的中间和上方，而是在右侧 2cm 处。

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

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

一些代码片段：

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

如果需要更多代码，请告诉我，但我认为这就足够了。希望这个问题可以解决！

亲切的问候

4

3 回答 3

0

在您的持有人 css 添加位置：相对；

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

看看是否可以解决它。

于 2012-05-30T15:09:16.327 回答
0

什么时候计算偏移变量？它应该在单击提示时存储。

如果您从隐藏之前获取偏移量，会发生什么？

var offset = $(this).offset().hide(500);

于 2012-05-30T18:08:52.260 回答
0

我想我已经找到了。在我的 CSS 中，我有另一个 div：

#s0 {
    position: relative;
    float: left; 
    height: 570px;
    width: 760px;
    background: #222 url('images/bg.png');
}

删除：position: relative;似乎修复它。会做更多的测试。谢谢大家的建议！

于 2012-05-30T20:58:34.233 回答