Wie kann ich mit js den Effekt erzielen, dass durch Klicken auf ein kleines Bild ein großes Bild angezeigt wird? (Codebeispiel)

In diesem Artikel wird hauptsächlich beschrieben, wie Sie js implementieren, um auf ein kleines Bild zu klicken, um ein großes Bild anzuzeigen, d während des Website-Erstellungsprozesses. Gerade bei Websites mit vielen Bildern ist die Anzeige von Miniaturansichten sehr wichtig, daher wäre es eine noch effizientere Darstellung, wenn man direkt auf das kleine Bild klicken kann, um eine Vorschau des großen Bildes anzuzeigen. js Klicken Sie auf das Bild, um es zu vergrößern. Die Bedienung ist nicht schwierig. Hier ist eine spezielle Codedemonstration für Sie.

Das spezifische Codebeispiel für das Klicken von js auf das kleine Bild, um das große Bild anzuzeigen, lautet wie folgt:

<div>
    <img  class="dialog" src="1.png" alt="Wie kann ich mit js den Effekt erzielen, dass durch Klicken auf ein kleines Bild ein großes Bild angezeigt wird? (Codebeispiel)" >
    <div id="dialog_large_image"></div>
</div>

<script type="text/javascript">
    $(function () {
        $("img.dialog").click(function() {
            var large_image = &#39;<img  src= &#39; + $(this).attr("src") + &#39;</img alt="Wie kann ich mit js den Effekt erzielen, dass durch Klicken auf ein kleines Bild ein großes Bild angezeigt wird? (Codebeispiel)" >&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

Was Sie hier wissen müssen Ja: jQuery-Ereignis – click()-Methode.

Wenn auf ein Element geklickt wird, tritt das Klickereignis auf.

Ein Klick erfolgt, wenn sich der Mauszeiger über einem Element befindet und dann die linke Maustaste gedrückt und wieder losgelassen wird. Die Methode

click() löst ein Klickereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn ein Klickereignis auftritt.

Dieser Artikel stellt das relevante Wissen über js vor. Klicken Sie auf das Miniaturbild, um zum großen Bild zu wechseln. Ich hoffe, dass es für Freunde in Not hilfreich ist.

[Empfohlene verwandte Artikel]

Eine einfache Methode, JS zu verwenden, um Bilder nach dem Klicken auf eine Schaltfläche automatisch zu wechseln

jquery erkennt den besonderen Effekt, wenn man auf das Bild klickt, um das große Bild auf dem mobilen Endgerät anzuzeigen_jquery

JS klickt auf das kleine Bild, um es mit dem großen Bild zu verknüpfen

Verwenden Sie JS, um Bilder zum Wechseln des Klickzyklus zu realisieren (mit Code)

Das obige ist der detaillierte Inhalt vonWie kann ich mit js den Effekt erzielen, dass durch Klicken auf ein kleines Bild ein großes Bild angezeigt wird? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!