HTML, CSS dan jQuery: Bina dinding gambar yang cantik-tutorial js-php.cn

HTML, CSS dan jQuery: Bina dinding gambar yang cantik

PHPz

Lepaskan： 2023-10-25 09:03:20

asal

914 orang telah melayarinya

HTML, CSS dan jQuery: Bina dinding gambar yang cantik

Dalam reka bentuk web, selalunya perlu menggunakan gambar untuk meningkatkan daya tarikan dan keindahan halaman. Sebagai kaedah susun atur biasa, dinding gambar boleh memaparkan berbilang gambar pada halaman web dengan teratur atau tidak teratur, memberikan orang perasaan yang kemas dan bersatu. Artikel ini akan menggunakan kod sampel untuk memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membina dinding gambar yang cantik.

Pertama sekali, anda perlu menyediakan beberapa gambar sebagai bahan untuk paparan. Anda boleh memilih sekumpulan imej yang berkaitan, atau mencarinya sendiri berdasarkan keperluan khusus anda. Pastikan setiap imej adalah saiz dan perkadaran yang sama supaya ia kelihatan kemas pada dinding gambar anda.

Seterusnya, kami mula menulis kod HTML. Mula-mula buat elemen <div> dan tetapkan ID unik untuk operasi CSS dan jQuery berikutnya. <code><div>元素，设置一个唯一的ID用于后续的CSS和jQuery操作。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><div id="image-wall"></div></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>然后，在JavaScript的区域内，我们使用jQuery动态地为这个<code><div>元素添加图片。通过循环遍历图片数组，将每张图片作为一个<img alt="HTML, CSS dan jQuery: Bina dinding gambar yang cantik" >元素插入到#image-wall中。

var imageArray = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg'];

$.each(imageArray, function(index, value) {
  $('<img  alt="HTML, CSS dan jQuery: Bina dinding gambar yang cantik" >').attr('src', value).appendTo('#image-wall');
});

Salin selepas log masuk

接下来，我们可以使用CSS来美化这个图片墙。通过对#image-wall以及内部的图片元素进行样式设置，来定义图片墙的布局和外观。

#image-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#image-wall img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
}

Salin selepas log masuk

在上述示例中，我们使用了CSS的flex布局，使图片墙能够在空间有限的情况下自适应排列。通过设置img元素的宽度、高度和object-fit属性，可以保持每张图片的比例不变，并且使用margin-bottom

$('#image-wall img').hover(function() {
  $(this).css('transform', 'scale(1.2)');
}, function() {
  $(this).css('transform', 'scale(1)');
});

Salin selepas log masuk

Kemudian, dalam kawasan JavaScript, kami menggunakan jQuery untuk menambahkan imej secara dinamik pada elemen <div> ini. Dengan menggelung melalui tatasusunan imej, setiap imej dimasukkan ke dalam <code>#image-wall sebagai elemen <img alt="HTML, CSS dan jQuery: Bina dinding gambar yang cantik" >.

rrreee

Seterusnya, kita boleh menggunakan CSS untuk mencantikkan dinding gambar ini. Tentukan reka letak dan penampilan dinding imej dengan menggayakan #image-wall dan elemen imej dalaman.

rrreee

Dalam contoh di atas, kami menggunakan reka letak fleksibel CSS untuk membolehkan dinding gambar disusun secara adaptif apabila ruang terhad. Dengan menetapkan atribut lebar, tinggi dan object-fit elemen img, anda boleh mengekalkan perkadaran setiap imej tidak berubah dan menggunakan margin-bottom Tambah sedikit ruang antara setiap imej.

Akhir sekali, kami boleh menambah beberapa kesan interaksi tetikus pada dinding gambar untuk meningkatkan pengalaman pengguna. Ambil kesan membesarkan gambar sebagai contoh Dalam kawasan kod jQuery, kita boleh menambah kod berikut:

rrreee

Dalam kod di atas, dengan menggunakan kaedah hover, apabila tetikus melayang di atas gambar, ia akan dibesarkan. sebanyak 1.2 kali. Mengembalikan imej kepada saiz asalnya apabila tetikus tidak lagi melayang di atasnya. 🎜🎜Melalui langkah di atas, kami telah berjaya membina dinding bergambar yang cantik. Anda boleh menyesuaikan lagi dinding imej anda dengan menambahkan lebih banyak gaya CSS dan kesan jQuery. 🎜🎜Ringkasnya, tidaklah rumit untuk membina dinding gambar yang cantik menggunakan HTML, CSS dan jQuery. Melalui tetapan susun atur yang munasabah dan beberapa kesan interaktif yang mudah, anda boleh menjadikan halaman web anda lebih jelas dan kaya. Saya harap kod contoh dalam artikel ini dapat membantu anda membina dinding gambar anda sendiri. 🎜