Javascript Organizar imágenes como pila de tarjetas

Question

Soy nuevo en javascript así que estoy seguro de que hay muchas cosas que me faltan en su comprensión. Lo que intento hacer es crear una capa de imágenes para que parezca un montón de cartas.

han visto códigos similares y han tratado de seguir su idea, pero no puedo conseguir que las imágenes se coloquen correctamente. Las 10 o más imágenes se colocan en la misma ubicación exacta.

¿Alguna ayuda para ver por qué no posicionan? También, ¿qué es "em"? No puedo encontrar ninguna literatura sobre eso pero supongo que es la medida em como px ?? ¿Por qué está en ""?

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" es el ancho de una "M" en lo que se está utilizando la fuente (o fuente por defecto del navegador si no lo anule).

Hay al menos dos cosas incorrectas en su código: izquierda y superior no tienen significado a menos que el elemento al que se aplican también tenga posición: absoluta o posición: relativa (o posición: fija, creo). Su enfoque más seguro es aplicar posición: relativa (pero no a la izquierda: o superior :) al contenedor y posición: absoluta para cada una de las tarjetas. Solo hay una img. Para múltiples tarjetas, necesita múltiples imgs; de lo contrario, el mismo img se reposiciona una y otra vez. Un enfoque más económico es, probablemente, mostrar una imagen de "pila" separada para varias tarjetas e imágenes de una sola tarjeta para una sola tarjeta.

Un enfoque aún más económico es solo mostrar imágenes de una sola tarjeta con una "información sobre herramientas" para indicar el número de tarjetas en una pila. He empleado con éxito esta técnica en la implementación de un juego de pacientes.

Por supuesto, estas técnicas alternativas no funcionan si desea mostrar varias tarjetas como una pila "desplegada" de tarjetas vueltas hacia arriba. Crea una clase y modifica la posición de eso para el mazo. Aquí está el código de trabajo:

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

} 

Espero que esto ayude.

Answer 2

Mi conjetura es que su desplazamiento es demasiado pequeño: si sustituye la "em" con "px" por el bien de la prueba, y aumentar las variables left y top por 10 en lugar de 0,1, apuesto a que ver algunos resultados

Para explicar el em: 1em es igual al tamaño de fuente actual del elemento. Si no ha configurado el tamaño de fuente, usa el navegador predeterminado. Si configura el tamaño de la fuente, p. Ej. 20px en la etiqueta corporal, luego 1em equivaldrá a 20px.

Answer 3

Asegúrate de que tus 'cartas' tengan la 'posición' de la propiedad css, ya sea 'absoluta' o 'relativa'.

Answer 4

Hay un par de problemas con ese código.

1. sólo está utilizando una img, y entonces usted está añadiendo a cada div se crea. Cuando agrega un elemento a otro elemento, si ya está en el árbol DOM, termina moviendo. Lo que necesita es crear un elemento img por separado para cada tarjeta.

2. No nos has mostrado tu CSS, pero a menos que estés usando CSS para hacer todas las div elementos bajo el elemento #deck absoluta o relativamente posicionado, se tendrán en cuenta los atributos de estilo left y top, como el div será sujeto a flujo normal.

también lo es "em". No puedo encontrar ninguna literatura sobre eso pero supongo que es la medida em como px ??

Sí, es un term from typography. Un "em" es el ancho de una letra mayúscula M.

¿Qué es ""?

Porque es una cadena. También tendrías que tener "px" entre comillas. Lo que está haciendo con este código:

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

... está utilizando JavaScript para establecer una propiedad de estilo. Las propiedades de estilo siempre son cadenas, en este caso estás creando cadenas como "0.1em" y "0.2em", etc.

un poco de lectura:

• DOM2 Core specification
• DOM2 HTML specification
• DOM3 Core specification
• HTML5 specification
• Various CSS specifications
• Un buen libro sobre JavaScript, me gustó bastante JavaScript: La guía definitiva por David Flanagan
• Un buen libro sobre CSS y HTML autoría