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”的宽度（或浏览器的默认字体，如果没有覆盖它）。

您的代码中至少有两个问题： left和top没有任何意义，除非它们所应用的元素也有位置：绝对或位置：相对（或位置：我认为是固定的）。你最安全的方法是将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;
}

}

希望这会有所帮助。

Answer 2

该代码存在一些问题。

您只使用一个img，然后将其附加到您创建的每个div。将元素追加到另一个元素时，如果它已经在DOM树中，则最终移动它。您需要为每张卡创建一个单独的img元素。
您尚未向我们展示您的CSS，但除非您使用CSS将div元素下的所有#deck元素置于绝对或相对位置，否则left和top样式属性将被忽略，因为div将受到正常流程的影响。

什么是“em”。我找不到任何关于它的文献，但假设它是像px ??
那样的测量值

是的，它是term from typography。 “em”是大写字母M的宽度。

为什么会出现在“”？

因为它是一个字符串。你还必须在引号中加上“px”。您正在使用此代码执行的操作：

cardNode.style.left = left + "em";

...正在使用JavaScript来设置样式属性。样式属性总是字符串，在这种情况下，您创建的字符串如“0.1em”和“0.2em”等。

一些阅读：

DOM2 Core specification
DOM2 HTML specification
DOM3 Core specification
HTML5 specification
Various CSS specifications
一本关于JavaScript的好书，我非常喜欢David Flanagan的 JavaScript：The Definitive Guide
关于CSS和HTML创作的好书

Answer 3

我的猜测是你的偏移量太小了：如果为了测试而将“em”替换为“px”，并将left和top变量增加10而不是0.1，我打赌你会看到一些结果。

解释em：1em等于元素的当前字体大小。如果您尚未设置字体大小，则使用浏览器默认值。如果将font-size设置为例如身体标签上20px，然后1em将等于20px。

Answer 4

确保你的'牌'设置了css属性'position' - 要么是'绝对'，要么'相对'。

Javascript将图像排列成一堆卡片

4 个答案: