Question

我一直在使用jquery img和.position()

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

有什么想法吗？

Answer 1

您可以通过这种方式重叠图像。我将位置设置为fixed，然后为其他图像设置左侧和顶部值。我不完全确定你为什么要这样做;所以，如果它不是理想的结果，那就发表评论。

＆＃13;

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

＆＃13;

img {
  width:100px;
  height:100px;
  border:1px solid black;
}

#img1, #img2, #img3 {
  position:fixed;
}

#img1 {
  left:50px;
  top:50px;
}

＆＃13;

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

＆＃13;

Answer 2

将元素转换为以这种方式工作 位置：相对; 左：20px;

Answer 3

我不知道你的意思，但我刚刚纠正了你的代码。

$(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>

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

3 个答案: