Javascript将图像排列成一堆卡片

Question

我是javascript的新手,所以我确定我的理解中缺少很多.我想要做的是创建一层图像,使它看起来像一堆卡片.

已经看过类似的代码,并试图遵循他们的想法,但我不能让图像正确定位.所有10张左右的图像都放在完全相同的位置.

可以帮忙看看为什么他们没有定位？什么是"em".我找不到任何关于它的文献但是假设它是像px一样的测量值？为什么它在""？

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
var img = document.createElement("IMG");
img.src = "wendell7_back.png";
el = document.getElementById('deck');
el.appendChild(img);
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top  = top + "em";
    el.appendChild(cardNode);
    left += 0.1;
    top  += 0.1;
}

   }

Answer 1

"em"是使用任何字体的"M"的宽度(或浏览器的默认字体,如果没有覆盖它).

至少有两件事情错在你的代码:左,顶部已没有任何意义,除非它们也开始应用的元素具有的位置是:绝对或位置:亲属(或位置:固定的,我认为).你最安全的方法是将position:relative(但没有left:或top :)应用到容器和position:每个卡的绝对位置.只有一个img.对于多张牌,你需要多个img,否则同样的img会一遍又一遍地重新定位.更经济的方法可能是为单张卡片显示多张卡片和单张卡片图像的单独"堆叠"图像.

更经济的方法是仅显示具有"工具提示"的单卡图像以指示堆叠中的卡的数量.我已经成功地将这种技术用于患者游戏的实施中.

当然,如果你想将多张卡片展示为一张"扇出"的上翻卡片,这些替代技术就不起作用了.创建一个类并修改该套牌的位置.这是工作代码:

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
el = document.getElementById('deck');
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.className = "card2";
    var img = document.createElement("IMG");
    img.src = "wendell7_back.png";
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em";
    el.appendChild(cardNode);
    left += .1;
    top  -= 6.2;
}

}

希望这会有所帮助.