javascript - JQuery 将两个图像设置为与另一个图像相同的位置

Question

我一直在尝试使用 jquery .position() 和 .css() 将 img 设置在与另一个相同的位置

代码如下:

function setImgsToSamePosition() {
    var position = $('#img1').position();
    $('#img2').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
    $('#img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}

$(document).ready(function () {
    // Set imgs pos to be equal to img1 pos
    setImgsToSamePosition();
})

有什么想法吗？

Answer 1

您可以用这种方式重叠图像。我将位置设置为 fixed 然后为其他两个图像设置 left 和 top 值。我不完全确定你为什么要这个；所以，如果不是想要的结果，请发表评论。

function setImgsToSamePosition() {
    var position = $('#img1').position();
    $('#img2, #img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}

$(document).ready(function () {
    // Set imgs pos to be equal to img1 pos
    setImgsToSamePosition();
})

img {
  width:100px;
  height:100px;
  border:1px solid black;
}

#img1, #img2, #img3 {
  position:fixed;
}

#img1 {
  left:50px;
  top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" src="http://neil.computer/stack/bg.jpg" />
<img id="img2" src="http://neil.computer/stack/bg2.jpg" />
<img id="img3" src="http://neil.computer/stack/bg3.jpg" />