我有一個頁面，顯示數組列表中的項目，每個項目都有一個圖像，上限為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
1 回答
慕絲7291255
TA貢獻1859條經驗 獲得超6個贊
您必須在開始時使用“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) {
const imgSrc = e.target.src;
popImg.src = imgSrc;
popUp.classList.remove("hidden");
}
imgsArray.forEach((img) => {
img.addEventListener('click', popUpImage);
})
popUp.addEventListener('click', () => {
popUp.classList.add("hidden");
});
- 1 回答
- 0 關注
- 98 瀏覽
添加回答
舉報
0/150
提交
取消