JavaScript implementiert das Schließen von Bildern

Im Webdesign sind Bilder eines der häufigsten Elemente. Wenn Benutzer Webseiten durchsuchen, stoßen sie manchmal auf Situationen, in denen sie Bilder schließen müssen. Zu diesem Zeitpunkt können wir JavaScript verwenden, um die Funktion zum Schließen von Bildern zu implementieren. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zum Schließen von Bildern implementieren.

1. Anforderungsanalyse

Nach dem Einfügen eines Bildes in die Seite muss es eine Möglichkeit geben, das Bild zu schließen, damit Benutzer die Seite weiter durchsuchen können. Durch die Analyse der Anforderungen können wir feststellen, dass die folgenden Anforderungen zur Implementierung dieser Funktion erforderlich sind:

1. Durch Klicken auf einen Bereich außerhalb des Bildes oder auf eine Schaltfläche zum Schließen kann das Bild geschlossen werden.
2. Um die Anpassung und Änderung dieser Funktion zu erleichtern, Der Code muss leicht zu verstehen und zu warten sein.
3. Die Codeausführungsgeschwindigkeit muss schnell sein, ohne das Bedienerlebnis des Benutzers zu beeinträchtigen.

2. Implementierungsideen

Basierend auf der obigen Bedarfsanalyse können wir die folgenden Implementierungsideen entwerfen:

1. Für jedes anzuzeigende Bild verwenden Sie ein Div, um es zu umschließen, und fügen dem Div ein halbtransparentes hinzu Schwarzer Hintergrund;
2. Platzieren Sie das Bild im Div und zeigen Sie es in der Mitte an.
3. Fügen Sie ein Klickereignis zum Div hinzu, wenn der Benutzer auf einen anderen Bereich als das Bild klickt Klicken Sie auf die Schaltfläche. Das Div wird ausgeblendet.

3. Implementierungsschritte

1. Fügen Sie ein div-Element zur HTML-Datei hinzu und platzieren Sie das anzuzeigende Bild im div.

<div id="imgBox">
    <img src="yourImage.jpg">
</div>

2. Legen Sie den Stil dieses div-Elements in einer CSS-Datei fest.

#imgBox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
}

#imgBox img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
}

3. Schreiben Sie Code in eine JavaScript-Datei, um Klickereignisse für div-Elemente festzulegen.

var imgBox = document.getElementById('imgBox');
imgBox.addEventListener('click',function(e){
    if(e.target === imgBox || e.target.nodeName === 'SPAN'){
        imgBox.style.display = 'none';
    }
});

Im obigen Code haben wir ein Klickereignis zum div-Element hinzugefügt. Wenn der Benutzer auf das div-Element klickt, bestimmt der Code, ob das Zielelement des Klickereignisses das div-Element selbst oder eine Schaltfläche zum Schließen ist (in In diesem Beispiel verwenden wir ein span-Element als Schließen-Schaltfläche. Wenn ja, wird das div-Element ausgeblendet.

4. Vollständiger Code

Der Kerncode lautet wie folgt:

<div id="imgBox">
    <img src="yourImage.jpg">
    <span>关闭</span>
</div>

#imgBox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
}

#imgBox img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
}

#imgBox span{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

#imgBox span:hover{
    text-decoration: underline;
}

e

5. Durch die oben genannten Schritte haben wir JavaScript erfolgreich verwendet, um die Funktion zum Schließen des Bildes zu realisieren. Wenn der Benutzer auf einen Bereich außerhalb des Bildes oder auf eine Schaltfläche zum Schließen klickt, verschwindet das Bild von der Seite. Die Codestruktur der Funktion ist klar, leicht zu verstehen und zu warten und sie wird sehr schnell ausgeführt. Die Verwendung dieser Funktion kann das Bedienerlebnis des Benutzers verbessern und ihm ein komfortableres Surfen im Internet ermöglichen.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert das Schließen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!