Question

我想在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/

单击屏幕开启时，将应用该屏幕。单击屏幕关闭时，屏幕将被删除。当您再次单击屏幕开启时，将应用该屏幕，但它将显示在不同的位置，不再完全位于画布div上。但是console.log显示了与jQuery offset（）调用完全相同的参数！？

有没有人知道发生了什么？

由于

Answer 1

从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'
    });
});

请参阅DEMO。

Answer 2

啊！得到它了！

我将.offset（）应用于没有宽度且没有高度的元素，即display：none所留下的状态，这给出了不可靠的结果。在偏移量表现良好之前，我必须先“显示：阻止”元素，然后再应用偏移量。只是改变链中方法的顺序：

$（'＃canvasScreen'）。width（canvasWidth）.height（canvasHeight）.css（{'opacity'：'0.7'，'display'：'block'}）。offset（canvasOffset）;

jQuery offset（）表现得很奇怪

2 个答案: