Comment utiliser js pour obtenir l'effet de cliquer sur une petite image pour afficher une grande image ? (exemple de code)

Cet article présente principalement comment implémenter js pour cliquer sur une petite image pour afficher une grande image, c'est-à-dire js pour cliquer sur une petite image pour prévisualiser la grande image Lors de l'implémentation de cette fonction, vous rencontrerez inévitablement de telles exigences. pendant le processus de construction du site Web. Surtout pour les sites Web contenant de nombreuses images, l'affichage des vignettes est très important, ce serait donc un affichage encore plus efficace si vous pouviez cliquer directement sur la petite image pour prévisualiser la grande image. Il n'est pas difficile de faire fonctionner js en cliquant sur l'image pour l'agrandir. Voici une démonstration de code spécifique pour vous.

L'exemple de code spécifique de js cliquant sur la petite image pour faire apparaître la grande image est le suivant :

<div>
    <img  class="dialog lazy"  src="/static/imghwm/default1.png"  data-src="1.png"    alt="Comment utiliser js pour obtenir l'effet de cliquer sur une petite image pour afficher une grande image ? (exemple de code)" >
    <div id="dialog_large_image"></div>
</div>

<script type="text/javascript">
    $(function () {
        $("img.dialog").click(function() {
            var large_image = &#39;<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/139/183/406/1533975118964938.png?x-oss-process=image/resize,p_40"  class="lazy"  src= &#39; + $(this).attr("src") + &#39;</img alt="Comment utiliser js pour obtenir l'effet de cliquer sur une petite image pour afficher une grande image ? (exemple de code)" >&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

Ici Les points de connaissances à comprendre sont : les événements jQuery - méthode click().

Lorsqu'un élément est cliqué, l'événement click se produit.

Un clic se produit lorsque le pointeur de la souris est sur un élément, puis le bouton gauche de la souris est enfoncé et relâché. La méthode

click() déclenche un événement de clic ou spécifie une fonction à exécuter lorsqu'un événement de clic se produit.

Cet article présente les connaissances pertinentes sur js en cliquant sur la vignette pour passer à la grande image. J'espère qu'il sera utile aux amis dans le besoin.

[Articles connexes recommandés]

Une méthode simple pour utiliser JS pour changer automatiquement d'image après avoir cliqué sur un bouton

jquery réalise l'effet spécial de cliquer sur l'image pour voir la grande image sur le terminal mobile_jquery

JS cliquez sur la petite image pour l'associer à la grande image

Utilisez JS pour réaliser des images de changement de cycle de clic (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!