img要素を非常に似たgif要素で置き換える方法

Question

私のコードでは、要素はランダムに生成され、クリックすると別のgif要素に置き換えられます。私はoffset（）を使用して画像の最初と最後の値を取得し、次にreplaceWith（）を使用してgifに置き換え、css（）を使用してgifの左と上の値を指定します。

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

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

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

あなたが見ることができるように、両方の位置が固定されています。私がこれを実行すると、imgとgifは別々の位置にあり、それらが同じであるかどうかを確認するために、コンソールにトップと左の値を記録しました。なぜ彼らは異なった位置にいるのですか？gifがイメージをその正確な位置に置き換えるようにするにはどうすればいいですか？

Answer 1

htmlがありませんstyle属性が<img>であり、自己閉鎖しています。 calc()をleftプロパティ値に設定してthewidthに設定し、.replaceWith()コールで同じ値を使用します。あるいは

、@GeneParcellanoによって示唆されるように、.attr()と同じ要素のid属性をsrcを置き換える、jQuery()を使用し、要素で"enemies".classNameを除去するチェーン.removeClass()。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

jsfiddle `thewidth`が定義されているhttps://jsfiddle.net/mL1y1qk5/3/

Answer 2

変換元プロパティを敵クラスに追加して、イメージの原点をイメージの中心ではなく上に設定してみてください。

.enemies{ 
transform-origin: 0% 0%; 
} 

また、爆発IDのCSSプロパティでも設定します。