Question

我无法将平铺图像放到我希望它实际移动到的屏幕上。在这种情况下，我希望有10张图像的边没有任何间隙。

我试图更改值，更改图像并使用警报功能来调试问题，但我找不到问题（我不是一个经验丰富的程序员...）。

"use strict";
window.onload = function(){
    var mainContainer = document.getElementById("mainContainer");
    for(var n = 0; n < 10; n++){
        drawImageOnSpecifiedPosition(0,n*500,0,mainContainer);  
    }
}

function setCoords(x, y, img){
    img.style.position = "absolute";
    img.style.left = x;
    img.style.top = y;
}

function drawImageOnSpecifiedPosition(whichOne, x, y, whereToAppend){
    var imageNames = [
                     "assets/isometric_pixel_0001.png",
                     "assets/isometric_pixel_0002.png",
                     "assets/isometric_pixel_0003.png",
                     "assets/isometric_pixel_0004.png",
                     "assets/isometric_pixel_0005.png",
                     "assets/isometric_pixel_0006.png",
                     "assets/isometric_pixel_0007.png",
                     "assets/isometric_pixel_0008.png",
                     "assets/isometric_pixel_0009.png",
                     "assets/isometric_pixel_00010.png"
    ];
    var imageToCreate = document.createElement("img");
    imageToCreate.src = imageNames[whichOne];
    setCoords(x, y, imageToCreate);
    whereToAppend.appendChild(imageToCreate);
}

我希望每行有10张图像。但是，我得到的是两张稍微移位的图像。当我检查控制台时，我似乎也没有收到任何错误消息，因此我假设故障出在我的编程不良上。

Answer 1

问题是您不能仅通过提供数字来更改元素位置。

img.style.left = x;

浏览器需要测量。由于我们在像素级别进行操作，因此您需要添加 px 。

img.style.left = x + "px";
img.style.top = y + "px";

如何修复未在所需位置渲染的图像

1 个答案: