调整浏览器屏幕的大小让我的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
如果需要更多的代码,请让我知道,但我认为这是足够的。希望这个问题可以解决!
亲切的问候
我想我已经找到它了。在我的CSS我有另外一个DIV:
#s0 {
position: relative;
float: left;
height: 570px;
width: 760px;
background: #222 url('images/bg.png');
}
删除:position: relative;
似乎解决它。会做更多的测试。非常感谢您的建议!
你的持有人css add position:relative;
#holder {
width: 940px;
margin: auto auto;
position: relative;
}
看看是否可以修复它。
没有在这一个运气 – Maurice
何时计算偏移量变量? 点击提示时应该存储它。
你会从隐藏之前的偏移量发生什么?
var offset = $(this).offset()。hide(500);
只有在这里'var offset = $(this).hide(500).offset();''这里''这是被点击的div – Maurice
如果您需要在js中进行一些维数学计算,您需要在resize中进行。 – Bergi
我该怎么做? – Maurice