如何让图像转到div的位置?

时间:2017-07-26 07:29:34

标签: javascript jquery html css

如何将图像克隆到div的位置?



$(".raindrop1").clone().removeClass("raindrop1").appendTo("body");
$("img").css({"left": "div".x, "top": "div".y});

.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}

<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
&#13;
&#13;
&#13;

有人可以帮帮我吗?

3 个答案:

答案 0 :(得分:2)

示例1

如果您想将克隆的raindrop置于div's位置,那么您应该使用{im}插入.appendTo(".shape")

div

$(".raindrop1").clone().removeClass("raindrop1").appendTo(".shape");
$("img").css({
  "left": "div".x,
  "top": "div".y
});
.shape {
  border-radius: 50px;
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">

示例2

如果您不想将其附加到div,请使用以下代码:

$("img:not(.raindrop1)").css({
  "left": $(".shape").position().left,
  "top": $(".shape").position().top,
  "position": "relative"
});

$(".raindrop1").clone().removeClass("raindrop1").appendTo("body");
$("img:not(.raindrop1)").css({
  "left": $(".shape").position().left,
  "top": $(".shape").position().top,
  "position": "relative"
});
.shape {
  border-radius: 50px;
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">

答案 1 :(得分:0)

获取您可以使用let top = $("div").css("top")的div的位置,然后设置图片的值$("img").css("top",top)

答案 2 :(得分:0)

var imgclone = targetdiv.clone()
    .offset({
    top: targetdiv.offset().top,
    left: targetdiv.offset().left
})