Miten luodaan: välilehtimainen kuvakokoelma
- } Edellinen sivu
- Käy itse kokeilemassa Seuraava sivu
Opi, miten luot välilehtimäisen kuvakokoelman käyttämällä CSS:ää ja JavaScriptiä.
Välilehtimainen kuvakokoelma
Klikkaa kuvaa laajentaaksesi:




×
Luo välilehdet galleria
Vaihe 1 - Lisää HTML:
<!-- 网格:四列 --> <div class="row"> <div class="column"> <img src="img_nature.jpg" alt="Nature" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_snow.jpg" alt="Snow" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_mountains.jpg" alt="Mountains" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_lights.jpg" alt="Lights" onclick="myFunction(this);"> </div> </div> <!-- 展开的图像容器 --> <div class="container"> <!-- 关闭图像 --> <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> <!-- 扩展图像 --> <img id="expandedImg" style="width:100%"> <!-- 图像文本 --> <div id="imgtext"></div> </div>
Käytä kuvaa laajentamaan tiettyä kuvaa. Kun klikataan sarakekuvaa, kyseinen kuva näytetään sarakekuvan alla olevassa kontissa.
Toinen vaihe - lisää CSS:
Luo neljä saraketta ja aseta kuvatyylit:
/* Ruudukko: neljä rinnakkain olevaa yhtä suurta saraketta */ .column { float: left; width: 25%; padding: 10px; } /* Määritä ruudukossa olevien kuvien tyylit */ .column img { opacity: 0.8; cursor: pointer; } .column img:hover { opacity: 1; } /* Poista sarakkeiden jälkeen kellastuminen */ .row:after { content: ""; display: table; clear: both; } /* Laajennetun kuvan kontti (tarvitsee sijoittelun sulkemispainikkeen ja tekstin asettamiseksi) */ .container { position: relative; display: none; } /* Laajennetun kuvan teksti */ #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } /* Kuva-ikkunassa oleva suljetun painike */ .closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; }
Kolmas vaihe - lisää JavaScript:
function myFunction(imgs) { // Hae laajennettu kuva var expandImg = document.getElementById("expandedImg"); // Hae kuvatexti var imgText = document.getElementById("imgtext"); // Käytä laajennetussa kuvassa samaa src:ta kuin ruudukosta klikatusta kuvasta expandImg.src = imgs.src; // Käytä klikattavan kuvan alt-ominaisuuden arvoa laajennetun kuvan sisällä olevan tekstin arvona imgText.innerHTML = imgs.alt; // Näytä konttietue-elementti (piilotettu CSS:llä) expandImg.parentElement.style.display = "block"; }
- } Edellinen sivu
- Käy itse kokeilemassa Seuraava sivu