调整浏览器屏幕的大小让我的div偏移量变大

我目前正在创建一个麻将游戏。游戏和完整一样好。一切正常，直到我决定把游戏放在div（div id="holder"）中，以确保它将在浏览器窗口中居中。调整浏览器屏幕的大小让我的div偏移量变大

会发生什么？

第1步： 调整您的浏览器窗口，所以它的游戏大小（所以没有白色边框的左边或右边注意匹配：顶端加入了更多的空间时，问题也适用，但在本演示中，不可能调整这个

步骤2： 点击：Click to Start，比赛将开始，然后单击任何提示按钮，你会看到一个NR出现你刚刚点击上面的按钮，它向上移动并消失，这个nr位置正确，应该总是出现在HINT上方的中间，但是吨你点击。

3步： 现在调整您的浏览器窗口，给白色空间游戏（比方说）2厘米左侧和右侧。

第4步： 现在点击另一个提示按钮。注意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部分（使用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

如果需要更多的代码，请让我知道，但我认为这是足够的。希望这个问题可以解决！

亲切的问候

来源

2012-05-30 Maurice

如果您需要在js中进行一些维数学计算，您需要在resize中进行。 – Bergi

我该怎么做？ – Maurice

我想我已经找到它了。在我的CSS我有另外一个DIV：

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

删除：position: relative;似乎解决它。会做更多的测试。非常感谢您的建议！

来源

2012-05-30 20:58:34 Maurice

你的持有人css add position：relative;

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

看看是否可以修复它。

来源

2012-05-30 15:09:16

没有在这一个运气 – Maurice

何时计算偏移量变量？点击提示时应该存储它。

你会从隐藏之前的偏移量发生什么？

var offset = $（this）.offset（）。hide（500）;

来源

2012-05-30 18:08:52 Timbadu

只有在这里'var offset = $（this）.hide（500）.offset（）;''这里''这是被点击的div – Maurice

调整浏览器屏幕的大小让我的div偏移量变大

回答

相关问题