Ubah saiz pop timbul agar sesuai dengan saiz imej '

Artikel ini menunjukkan penyelesaian JavaScript yang bijak untuk mengubah saiz tingkap popup secara dinamik untuk menyesuaikan dengan sempurna imej yang mereka paparkan. Teknik ini berfungsi di pelbagai pelayar termasuk Netscape Navigator 4/5/6/7 dan Internet Explorer 4/5/6.

Penyelesaian ini melibatkan dua fail: halaman HTML utama yang mengandungi pautan ke imej dan fail html pop timbul (

). popup.htm

Halaman HTML utama termasuk pautan yang, apabila diklik, hubungi fungsi JavaScript

. Fungsi ini dibuka PopupPic() dalam tetingkap baru, lulus URL imej melalui rentetan pertanyaan: popup.htm

function PopupPic(sPicURL) {
    window.open("popup.htm?" + sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
}

Menggunakan JavaScript untuk mengekstrak URL imej dari rentetan pertanyaan, kemudian secara dinamik memasukkan tag popup.htm ke dalam halaman menggunakan <img alt="Ubah saiz pop timbul agar sesuai dengan saiz imej &#x27;" >. Secara asasnya, ia menggunakan acara document.write() untuk memanggil fungsi onload selepas imej telah dimuatkan: FitPic()

var arrTemp = self.location.href.split("?");
var picUrl = (arrTemp.length > 1) ? arrTemp[1] : "";
var NS = (navigator.appName == "Netscape") ? true : false;

function FitPic() {
    var iWidth = (NS) ? window.innerWidth : document.body.clientWidth;
    var iHeight = (NS) ? window.innerHeight : document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight);
    self.focus();
};

document.write("<img  src="%22%20+%20picUrl%20+%20%22" border="0" alt="Ubah saiz pop timbul agar sesuai dengan saiz imej &#x27;" >");

Fungsi

mengira perbezaan antara dimensi imej dan dimensi tetingkap penyemak imbas. Ia kemudian menggunakan FitPic() untuk menyesuaikan saiz tetingkap pop timbul dengan sewajarnya, memastikan kesesuaian sempurna. window.resizeBy()

Kaedah ini dengan elegan menyelesaikan masalah umum popup dan saiz imej yang tidak sesuai, memberikan pengalaman tontonan imej yang mesra pengguna. Kecekapan skrip dan keserasian silang penyemak imbas menjadikannya alat yang berharga untuk webmaster yang menguruskan galeri imej.

Soalan Lazim (Soalan Lazim): (diringkaskan untuk keringkasan)

• Memastikan saiz semula pop timbul: Gunakan JavaScript untuk mendapatkan dimensi imej secara dinamik dan tetapkan saiz pop timbul dengan sewajarnya.
• Amalan terbaik: Elakkan melebihi saiz viewport, mengekalkan nisbah aspek, memberikan butang dekat, dan menguji pada pelbagai saiz skrin.
• saiz semula imej dalam JavaScript: Gunakan elemen kanvas untuk saiz semula berkualiti tinggi.
• saiz pop timbul yang disyorkan: desktop: ~ 700-800px lebar, 500-600px tinggi; Mobile: ~ 300-350px lebar, 200-250px tinggi. Menyesuaikan diri dengan kandungan dan reka bentuk.
• saiz semula lancar: Gunakan kanvas dengan drawImage. smoothingQuality = 'high'
• Praktik Terbaik Reka Bentuk Popup: Pastikan ia mudah, gunakan pemesejan yang jelas, dan memudahkan untuk ditutup.
• popup responsif: Gunakan pertanyaan media CSS dan JavaScript untuk pelarasan dinamik.
• Ujian pada saiz skrin yang berbeza: Gunakan ciri -ciri emulasi peranti pemaju pelayar '.

Tanggapan yang disemak ini memberikan penjelasan yang lebih ringkas dan mudah dibaca sambil mengekalkan maklumat teras dan mengekalkan imej.

Atas ialah kandungan terperinci Ubah saiz pop timbul agar sesuai dengan saiz imej '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!