Question

在我的代码中，一个元素随机生成在身体的任何地方，当它被点击时，它被另一个gif元素替换。我使用offset（）来获取图像的顶部和左侧值，然后使用replaceWith（）将其替换为gif，并使用css（）指定gif的左侧和顶部值，如下所示：

＆＃13;

function randomInt(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

var thewidth = randomInt(1,1000);

$("body").prepend( "<img src='red_dot.png' class='enemies' id='enemy' left:thewidth/2 + 'px'></img>");

var n = $("#enemy").offset();
    console.log(n.left);
    console.log(n.top);
    $("#enemy").click(function()
    {
      $("#enemy").replaceWith("<img src='explosion.gif' id = 'explosion'></img>");
      $("#explosion").css({"left" : n.left+'px', "top" : n.top + "px"});

＆＃13;

.enemies
{
  position: fixed;
  transform: scale(0.01,0.01);
}

#explosion
{
  transform: scale(0.1,0.1);
  position: fixed;
}

＆＃13;

如您所见，两个位置都是固定的。当我运行它时，img和gif处于不同的位置，我将顶部和左侧值记录到控制台以检查它们是否相同并且它们是相同的。那么为什么他们处于不同的位置？我如何制作它以便gif始终将图像替换为其确切的位置？

Answer 1

尝试将变换原点属性添加到敌人类，将图像的原点设置为顶部而不是图像的中心。

App
   -> users
           ->
             4erkjkl543jfe46
                            ->name
                            ->email

也可以在爆炸ID的css属性中设置它。

Answer 2

html在style元素处缺少<img>属性，这是自动关闭的。在calc()属性值处使用left设置thewidth，在.replaceWith()来电时使用相同的值。

或者，使用jQuery()，根据@GeneParcellano建议，将src，id相同元素的属性替换为.attr()，使用链.removeClass()删除{{}元素1}} "enemies"。

.className

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

var thewidth = randomInt(1, 1000);

$("body")
.prepend(
  $("<img />", { 
    src :"http://lorempixel.com/50/50/cats",
    "class": "enemies",
    id:"enemy",
    css: {
      left: "calc(" + thewidth / 2 + "px)"
    }})
  );

$("#enemy").click(function() {
  $(this)
  .attr({
     "src": "http://lorempixel.com/50/50/nature"
  ,  "id": "explosion"
  })
  .removeClass("enemies");
});

.enemies {
  position: fixed;
  /*transform: scale(0.01, 0.01);*/
}
#explosion {
  /*transform: scale(0.1, 0.1);*/
  position: fixed;
}

jsfiddle https://jsfiddle.net/mL1y1qk5/3/

如何在任何时候在其确切位置替换img元素与非常相似的gif元素

2 个答案: