jquery klicken, um das Bild zu ändern-Front-End-Fragen und Antworten-php.cn

jquery klicken, um das Bild zu ändern

PHPz

Freigeben： 2023-05-25 10:22:37

Original

579 Leute haben es durchsucht

Bei der Webentwicklung ist es oft notwendig, Bildelemente zu verwenden, um den Inhalt und die visuellen Effekte der Seite zu bereichern. Manchmal müssen wir den Anzeigeeffekt ändern, wenn der Benutzer auf das Bild klickt, z. B. den Wechsel von einem normalen Bild zu einem hervorgehobenen Bild. Zu diesem Zeitpunkt müssen Sie dann die jQuery-Bibliothek verwenden, um diesen interaktiven Effekt zu erzielen.

jQuery ist eine häufig verwendete JavaScript-Bibliothek, die das Durchlaufen und Vorgänge von HTML-Dokumenten, die Ereignisverarbeitung, Animationseffekte und andere Vorgänge vereinfacht. Die Syntax ist prägnant und einfach zu verwenden, außerdem steht eine große Anzahl an Plug-Ins zur Auswahl. Im Folgenden verwenden wir jQuery, um ein Beispiel für die Änderung von Bildeffekten basierend auf Klicks zu implementieren.

Zuerst müssen wir das Bildelement, das wir bearbeiten möchten, in das HTML-Dokument einfügen. Hier nehmen wir als Beispiel ein blaues Auto.

<!DOCTYPE html>
<html>
<head>
    <title>jQueryjquery klicken, um das Bild zu ändern</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #car {
            width: 300px;
            height: 200px;
            background-image: url("blue-car.jpg");
            background-size: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="car"></div>
</body>
</html>

Nach dem Login kopieren

Unter anderem verwenden wir CSS-Stile, um die Größe, das Hintergrundbild und den Cursorstil des Bildes zu definieren. Gleichzeitig geben wir die Id dieses Elements als „car“ an, damit es später in JavaScript aufgerufen werden kann.

Als nächstes müssen wir eine JavaScript-Funktion schreiben, um das Klickereignis des Bildes zu implementieren. In diesem Fall können wir die von der jQuery-Bibliothek bereitgestellten Funktionen verwenden, um den Stil des Bildelements zu ändern.

$(function() {
    $('#car').click(function() {
        $(this).css('background-image', 'url("blue-car-highlight.jpg")');
    });
});

Nach dem Login kopieren

In dieser Funktion rufen wir zuerst das Bildelement mit der ID „car“ über das „$“-Symbol von jQuery ab und binden dann eine Click-Event-Listening-Funktion daran. Wenn der Benutzer auf das Bild des Autos klickt, wird diese Hörfunktion ausgeführt.

In dieser Listening-Funktion verwenden wir die von der jQuery-Bibliothek bereitgestellte Funktion „css“, um den Stil des Bildelements zu ändern. Der erste Parameter ist der Name des zu ändernden Stilattributs und der zweite Parameter ist der Attributwert eingestellt werden. In diesem Beispiel ändern wir die URL des Hintergrundbilds in „blue-car-highlight.jpg“, also ein Bild eines hervorgehobenen Autos.

Es ist erwähnenswert, dass wir, da das Bild im Ausgangszustand keinen Hervorhebungseffekt hat, ein weiteres Bild außerhalb dieses Bildelements hinzufügen müssen, z. B. „blue-car-highlight.jpg“ (das hervorgehobene Autobild). als Anzeigeeffekt nach dem Klicken.

Der endgültige Effekt ist im Bild unten dargestellt.

jquery klicken, um das Bild zu ändern

Bisher haben wir die Funktion, Bildeffekte mit einem Klick zu ändern, erfolgreich umgesetzt. Anhand der obigen Beispiele haben wir nicht nur die grundlegende Syntax der jQuery-Bibliothek kennengelernt, sondern auch gelernt, wie man die jQuery-Bibliothek zum Implementieren einer interaktiven Webseite verwendet.

Das obige ist der detaillierte Inhalt vonjquery klicken, um das Bild zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!