How to use js to achieve the effect of clicking on a small picture to display a large picture? (code example)

This article mainly introduces how to implement js to click on a small picture to display a large picture, that is, js to click on a small picture to preview the big picture. When implementing this function, you will inevitably encounter such requirements during the website construction process. Especially for websites with many images, the display of thumbnails is very important, so it would be an even more efficient display if you can directly click on the small image to preview the large image. js click on the picture to enlarge it is not difficult to operate. Here is a specific code demonstration for you.

js click on the small picture to pop up the specific code example of the big picture as follows:

<div>
    <img  class="dialog lazy"  src="/static/imghwm/default1.png"  data-src="1.png"    alt="How to use js to achieve the effect of clicking on a small picture to display a large picture? (code example)" >
    <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="How to use js to achieve the effect of clicking on a small picture to display a large picture? (code example)" >&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

Knowledge points to know here Yes: jQuery event - click() method.

When an element is clicked, the click event occurs.

A click occurs when the mouse pointer stays over an element, and then the left mouse button is pressed and released.

The click() method triggers a click event, or specifies a function to run when a click event occurs.

This article introduces the relevant knowledge about js clicking on the thumbnail to switch to the large image. I hope it will be helpful to friends in need.

【Recommended related articles】

A simple method to use JS to automatically switch images after clicking a button

jquery realizes the special effect of clicking on the picture to view the big picture on the mobile terminal_jquery

JS click on the small picture to associate it with the big picture

Use JS to realize click cycle switching pictures (with code)

The above is the detailed content of How to use js to achieve the effect of clicking on a small picture to display a large picture? (code example). For more information, please follow other related articles on the PHP Chinese website!