JQuery 将两个 img 设置为与另一个相同的位置

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

这是代码：

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();
})

有什么想法吗？

您可以通过这种方式重叠图像。我将位置设置为 fixed然后为其他两个图像设置左侧和顶部值。我不完全确定你为什么要这个;因此，如果这不是预期的结果，请发表评论。

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" />

以这种方式翻译元素位置：相对; 左：20px;

我不完全知道你在做什么，但我刚刚纠正了你的代码。

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

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/css/img_fjords.jpg" id="img1" style="height:100px;width:100px;"/>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" id="img2" style="height:100px;width:100px;"/>
<p id="pos"></p>
</body>
</html>

相关内容

最新更新

热门标签：