我有一個(gè)頁面，顯示數(shù)組列表中的項(xiàng)目，每個(gè)項(xiàng)目都有一個(gè)圖像，上限為120px. 如何在屏幕中間彈出更大尺寸的圖像？我見過一些可以幫助解決這個(gè)問題的插件，但我想在沒有任何插件的情況下完成它。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貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊
您必須在開始時(shí)使用“display：none”類創(chuàng)建“pop-up”div，然后使用JS刪除該“display：none”類并將內(nèi)部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 關(guān)注
- 109 瀏覽
添加回答
舉報(bào)
0/150
提交
取消