Größen Sie die Größe eines Popups, um die Größe eines Bildes anzupassen

Dieser Artikel zeigt eine clevere JavaScript -Lösung für die dynamische Größe von Popup -Windows, um die von ihnen angezeigten Bilder perfekt anzupassen. Die Technik funktioniert in verschiedenen Browsern, einschließlich Netscape Navigator 4/5/6/7 und Internet Explorer 4/5/6.

Die Lösung umfasst zwei Dateien: eine Haupt -HTML -Seite mit Links zu Bildern und eine Popup -HTML -Datei (popup.htm).

Die Haupt -HTML -Seite enthält Links, die beim Klicken eine JavaScript -Funktion PopupPic() aufrufen. Diese Funktion öffnet popup.htm in einem neuen Fenster und übergibt die Bild -URL über die Abfragezeichenfolge:

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

popup.htm verwendet JavaScript, um die Bild -URL aus der Abfragezeichenfolge zu extrahieren, und fügt dann das <img alt="Größen Sie die Größe eines Popups, um die Größe eines Bildes anzupassen" > -Tag mit document.write() dynamisch in die Seite ein. Entscheidend ist, dass das Ereignis onload die Funktion FitPic() nach dem Laden des Bildes aufgerufen wird:

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="Größen Sie die Größe eines Popups, um die Größe eines Bildes anzupassen" >");

Die FitPic() -Funktion berechnet die Differenz zwischen den Abmessungen der Bildabmessungen und den Abmessungen des Browserfensters. Anschließend wird window.resizeBy() die Popup -Fenstergröße entsprechend eingestellt und eine perfekte Passform gewährleistet.

Diese Methode löst elegant das gemeinsame Problem der nicht übereinstimmenden Popup- und Bildgrößen und bietet ein benutzerfreundliches Bild zur Bildbeobachtung. Die Effizienz des Skripts und die Kompatibilität des Cross-Browsers machen es zu einem wertvollen Tool für Webmaster, die Bildgalerien verwalten.

häufig gestellte Fragen (FAQ): (für die Kürze zusammengefasst)

• Stellen Sie sicher
Best Practices:
• Vermeiden Sie es, die Ansichtsfenstergröße zu übertreffen, das Seitenverhältnis aufrechtzuerhalten, eine Schließung zu geben und auf verschiedenen Bildschirmgrößen zu testen.
Die Größe der Größe in JavaScript:
• Verwenden Sie das Canvas-Element für eine hochwertige Größe.
Empfohlene Popup-Größen:
• Desktop: ~ 700-800px breit, 500-600px hoch; Mobile: ~ 300-350px breit, 200-250px hoch. Sich an Inhalt und Design anpassen.
Smooth -Größenänderung:
• Verwenden Sie Canvas mit . drawImage smoothingQuality = 'high'
Popup -Design Best Practices:
• Halten Sie es einfach, verwenden Sie klare Messaging und machen Sie es einfach zu schließen.
reaktionsschnelle Popups:
• Verwenden Sie CSS -Medienabfragen und JavaScript für dynamische Anpassungen.
Tests auf verschiedenen Bildschirmgrößen:
• Verwenden Sie die Geräte -Emulationsfunktionen von Browser Developer Tools.
Diese überarbeitete Antwort liefert eine prägnantere und lesbare Erklärung, während die Kerninformationen beibehalten und das Bild aufrechterhalten werden.

Das obige ist der detaillierte Inhalt vonGrößen Sie die Größe eines Popups, um die Größe eines Bildes anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!