HTML, CSS dan jQuery: Bina grid paparan imej yang cantik-tutorial js-php.cn

HTML, CSS dan jQuery: Bina grid paparan imej yang cantik

PHPz

Lepaskan： 2023-10-27 16:21:42

asal

821 orang telah melayarinya

HTML, CSS dan jQuery: Bina grid paparan imej yang cantik

HTML, CSS dan jQuery: Bina grid paparan gambar yang cantik

Dalam era Internet yang sangat grafik hari ini, memaparkan gambar telah menjadi bahagian yang sangat diperlukan dalam reka bentuk laman web. Untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna, adalah penting untuk membina grid paparan imej yang cantik. Dalam artikel ini, kami akan menggunakan HTML, CSS dan jQuery untuk melaksanakan grid paparan imej yang mudah tetapi menarik.

Pertama, kita perlu mencipta struktur HTML asas. Berikut ialah templat HTML ringkas yang merangkumi bekas grid dengan imej:

<!DOCTYPE html>
<html>
  <head>
    <title>图片展示网格</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">
        <img src="image1.jpg" alt="图片1">
      </div>
      <div class="grid-item">
        <img src="image2.jpg" alt="图片2">
      </div>
      <div class="grid-item">
        <img src="image3.jpg" alt="图片3">
      </div>
      <!-- 添加更多图片 -->
    </div>
  </body>
</html>

Salin selepas log masuk

Seterusnya, kami akan menggunakan CSS untuk menggayakan bekas grid dan imej. Berikut ialah contoh CSS mudah yang boleh anda ubah suai mengikut keperluan anda:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  position: relative;
}

.grid-item img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid-item:hover .overlay {
  opacity: 1;
}

.grid-item .overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.grid-item .overlay-content h3 {
  margin: 0;
  font-size: 24px;
}

.grid-item .overlay-content p {
  margin: 10px 0;
  font-size: 14px;
}

Salin selepas log masuk

Dalam CSS di atas, kami telah menggunakan reka letak Grid CSS untuk mencipta bekas grid responsif. Kami juga menambah sudut bulat dan topeng lut sinar pada setiap imej untuk memberikan kesan visual yang lebih baik.

Kini, kami akan menggunakan jQuery untuk mencapai kesan dinamik pada tuding tetikus. Berikut ialah contoh jQuery mudah di mana topeng akan pudar apabila tetikus dilegarkan pada imej:

$(document).ready(function() {
  $(".grid-item").hover(
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 1 }, 300);
    },
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 0 }, 300);
    }
  );
});

Salin selepas log masuk

Dalam kod jQuery di atas, kami menggunakan kaedah .hover()方法来捕捉鼠标悬停事件，并使用.stop()方法来停止之前的动画。然后，我们使用.animate() untuk melaraskan ketelusan topeng untuk mencapai Kesan pudar.

Ringkasnya, dengan menggunakan HTML, CSS dan jQuery, kami boleh membina grid paparan imej yang cantik dengan mudah. Anda boleh melanjutkan dan menyesuaikannya mengikut keperluan anda dan menambah lebih banyak imej dan kesan interaktif. Grid sedemikian boleh digunakan untuk mempamerkan produk, fotografi, karya seni dan banyak lagi, menambahkan daya tarikan visual dan penglibatan pengguna pada tapak web anda.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina grid paparan imej yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!