0
402
ViewsApilar imágenes con Javascript y CSS
Estoy usando vainilla JS y CSS. Me gustaría agregar un panqueque (PNG individuales) encima del panqueque anterior cada vez que hago clic en el botón de panqueque (🥞).
Sin embargo, hice que los panqueques se apilaran uno encima del otro, en lugar de volar sobre el anterior. He intentado hacer márgenes negativos para el elemento img en .css, así como altura negativa para el
elemento en .css, pero sin éxito. ¿Cómo puedo lograr un panqueque perfectamente apilado?
Resultado actual de la pila de panqueques
Resultado deseado
var count = 0; var imageArray = [ "img/pancake plate 1.png", "img/pancake straweberry 1.png", "img/pancake 1.png", "img/pancake 2.png", "img/pancake 3.png", "img/pancake 4.png" ]; // image array oragnised from bottom to top function addPancake() { var pancakeImage = document.createElement("img"); // create the <img> tag pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div> insertArea.insertBefore(document.createElement("br"), insertArea.childNodes[0]); // add <br> before every new image to show the "stacking" effect insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image count++; }; * { background-color: beige; font-size: 50px; } button { font-size: 200px; margin-left: 25vw; } #pancake-area { margin-left: 140px; } img { width: 200px; position: relative; } <div id="pancake-area"> </div> <button onclick="addPancake()">🥞</button>1 answers
Answer question0
Para obtener las imágenes en orden inverso, agregue display: flex; y flex-direction: column-reverse; al envoltorio #pancake-area . Esto también eliminó la necesidad de agregar las etiquetas <br/> a través de javascript, por lo que puede eliminarlas.
Para obtener la superposición, agregue un margin-bottom negativo (por ejemplo -50px , pero puede ajustar ese número a sus necesidades). Esto hará que las imágenes se superpongan de arriba a abajo.
Nota: Agregué una height fija y un border para hacerlos visibles en el ejemplo, ya que las rutas de la imagen están rotas. Puede dejar eso porque supongo que las rutas de la imagen están funcionando para usted.
var count = 0; var imageArray = [ "img/pancake plate 1.png", "img/pancake straweberry 1.png", "img/pancake 1.png", "img/pancake 2.png", "img/pancake 3.png", "img/pancake 4.png" ]; // image array oragnised from bottom to top function addPancake() { var pancakeImage = document.createElement("img"); // create the <img> tag pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div> insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image count++; }; * { background-color: beige; font-size: 50px; } button { font-size: 200px; margin-left: 25vw; } #pancake-area { margin-left: 140px; display: flex; flex-direction: column-reverse; } img { width: 200px; position: relative; margin-bottom: -50px; /* just for debugging cause image paths are broken: */ height: 100px; border: 1px dotted red; } <div id="pancake-area"> </div> <button onclick="addPancake()">🥞</button>