4

我想在 div 上放置一个半透明屏幕，这样我就可以在屏幕顶部显示图像，而不会分散 div 的内容。主 div 可以移动，所以我用 jQuery 读取它的当前宽度、高度和偏移量，然后将它们应用到屏幕上。但屏幕每次出现在不同的地方！核心代码是

$('#on').click(function () {
    canvasOffset = $('#canvas').offset();
    canvasWidth = $('#canvas').width();
    canvasHeight = $('#canvas').height();
    $('#canvasScreen').width(canvasWidth).height(canvasHeight).offset(canvasOffset).css({'opacity':'0.7', 'display' : 'block'});
    console.log("canvasHeight", canvasHeight, "canvasWidth", canvasWidth, "canvasOffset", canvasOffset);
});

这里有一个 jsfiddle：http: //jsfiddle.net/bdWW3/1/

当您单击屏幕上时，将应用屏幕。当您单击屏幕关闭时，屏幕将被删除。当您再次单击Screen On时，将应用屏幕，但它出现在不同的位置，不再完全位于画布 div 上方。但是 console.log 显示了完全相同的参数被放入 jQuery offset() 调用中！？

有人看到发生了什么吗？

谢谢

4

2 回答 2

5

第二次单击时，偏移量将应用两次on，从top: 110px; left: 8px到top: 220px; left: 16px。

.offset({left:0, top: 0})您应该在单击 时重置偏移量off。

$('#off').click(function () {
    $('#canvasScreen').offset({left:0, top: 0}).css({
        'display': 'none'
    });
});

见演示。

于 2013-06-03T00:33:51.773 回答
3

啊! 知道了！

我将 .offset() 应用于没有宽度和高度的元素，即 display:none 留下的状态，这会产生不可靠的结果。在对元素应用偏移之前，我必须“显示：阻止”元素，然后偏移才会正常运行。只需更改链中方法的顺序即可：

$('#canvasScreen').width(canvasWidth).height(canvasHeight).css({'opacity':'0.7', 'display' : 'block'}).offset(canvasOffset);

于 2013-06-03T16:37:05.787 回答