Di beranda dingqiu.com, saya menggunakan carousel plug-in bootstrap untuk menampilkan gambar di artikel. Saya secara otomatis mengambil gambar pertama artikel dalam program sebagai gambar yang akan ditampilkan di kontrol carousel. Karena ukuran gambar artikel bervariasi, dan ukuran plug-in carousel pada dasarnya diperbaiki, gambar dideformasi saat ditampilkan. Saya telah menemukan banyak metode Cina secara online tetapi belum menyelesaikannya (prosesnya berliku, jadi saya tidak akan mengulanginya). Sampai saya menemukan plug -in penskalaan jQuery ini - jqthumb.js. Mari kita lihat bagaimana menggunakannya dan bagaimana menggunakannya untuk mengontrol ukuran gambar dalam kontrol carousel, dan itu bisa tidak dideformasi dan dapat menampilkan bagian utama gambar (mirip dengan efek pencampuran gambar yang Anda posting di momen WeChat - saya tidak tahu jika Anda telah diperhatikan bahwa tanpa peduli rasio gambar yang Anda posting. Pertama, mari kita lihat Kode HTML Carousel Bootstrap:
<Div id = "carousel-example-generic" data-ride = "carousel"> <!-wrapper for slide-> <div role = "listbox"> <v> <a href = "termasuk gambar satu artikel jalur"> <img src = "gambar satu jalur" onload = "drawimage (ini)"/</a> </a> <gambar> haTLOAD = "drawImage (ini)"/</a> </a> <gambar> h4 "hoLOD =" ini (ini) (ini) "/</a> </a> <gambar> haTLOAD =" ONLOAD = "This)"//</a> <e> <her4> h4. "haTLOAD =" ini: "ini)" href = "Termasuk gambar satu jalur artikel"> gambar satu judul </a> </h4> </div> </div> <v> <a href = "disertakan gambar dua artikel"> <img src = "gambar dua path" onload = "drawimage (this)"/</a> <div> <h4> <a style = "warna: putih;" href = "Termasuk gambar dua jalur artikel"> gambar dua judul </a> </h4> </div> </div> <v> <a href = "disertakan gambar tiga artikel"> <img src = "disertakan gambar tiga path" onload = "drawImage (this)"/</a> <dv> <h4> <a style = "warna: putih;" href = "Termasuk Gambar Tiga Path"> Gambar Tiga Judul </a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>
Dari kode di atas, kita dapat melihat bahwa setiap gambar (IMG) memanggil drawImage fungsi saat memuat (onload). Dalam fungsi ini, kita dapat memanggil metode jqthumb.js untuk mengontrol ukuran gambar. Perhatikan bahwa fungsi harus ditambahkan sebelum kode HTML di atas. Kalau tidak, kontrol ukuran gambar akan gagal saat memuat pertama kali (karena waktu pemuatan halaman). Kode fungsi adalah sebagai berikut:
<!-Impor plugin-> <script type = "text/javaScript" src = "/static/plugins/thumb/js/jqthumb.js"> </script> <script> function drawImage (hotimg) {$ (hotimg) .jqthumb ({className: 'jqthumb', width: '%{{{classname:' jqthumb ', width:' 100%' x: '50%'}, zoom:' 1 ', Metode:' Auto ',});} </script>Dalam fungsi ini, kami memanggil metode JQThumb untuk menentukan thumbnail gambar asli dengan lebar 300px dan plug-in carousel. Thumbnail dihasilkan dari pusat gambar (perhatikan pengaturan atribut posisinya). Dengan cara ini, bahkan jika ukuran gambar berubah, konten utama gambar dapat ditampilkan, dan rasio gambar dapat tetap tidak berubah.
Sumber: dingqiu.com
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten. Saya harap ini akan membantu semua orang dan saya harap semua orang akan lebih mendukung wulin.com.