如何从数组列表中弹出图像/javascript

Question

我有一个页面，显示数组列表中的项目，每个项目都有一个图像，上限为120px. 如何在屏幕中间弹出更大尺寸的图像？我见过一些可以帮助解决这个问题的插件，但我想在没有任何插件的情况下完成它。

html:

<div id="animallist"></div>

javascript:

const animals = [{

    name: "Cat",

    useful: "no",

    image: "https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"

  },

  {

    name: "Dog",

    useful: "yes",

    image: "https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg"

  },

  {

    name: "Fish",

    useful: "no",

    image: "https://cdn0.wideopenpets.com/wp-content/uploads/2019/10/Fish-Names-770x405.png"

  },

  ]

animals.forEach(addLink);

function addLink(animal, i) {

  const div = document.createElement('div');

  const animalList = document.createElement('h2');

  const image = document.createElement('img');

  image.id = "image";

  animalList.innerHTML =  animal.name + " " +"-"+"useful?" + " "+ animal.useful;

  animalList.style.cssText = "text-align:center;"

  image.src = animal.image;

  div.appendChild(image);

  div.appendChild(animalList);

  div.dataset.animalName = animal.name;

  animallist.appendChild(div);

}

jsfiddle

Answer 1

您必须在开始时使用“display：none”类创建“pop-up”div，然后使用JS删除该“display：none”类并将内部img src更改为您的img。这是工作代码：https://jsfiddle.net/bcdu3L2j/1/const imgs = document.getElementsByTagName('img');const imgsArray = Array.from(imgs);const popUp = document.getElementById('pop-up');const popImg = document.querySelector('#pop-up img');function popUpImage(e) {&nbsp; const imgSrc = e.target.src;&nbsp; popImg.src = imgSrc;&nbsp; popUp.classList.remove("hidden");}imgsArray.forEach((img) => {&nbsp;img.addEventListener('click', popUpImage);})popUp.addEventListener('click', () => {&nbsp; popUp.classList.add("hidden");});