js如何操作來實現點擊小圖展示出大圖的效果？ （程式碼範例）

本篇文章主要跟大家介紹如何實現js點擊小圖片顯示大圖即js點擊小圖預覽大圖，這種功能實現在網站建設過程中，難免會遇到這樣的要求。特別對於多圖的網站來說，縮圖的展示至關重要，那麼如果能直接點擊小圖預覽大圖那更是高效率的展現。 js點擊圖片放大並不是一件難操作的事。下面為大家帶來具體程式碼示範。

js點擊小圖彈出大圖的具體程式碼範例如下：

#

<div>
    <img  class="dialog lazy"  src="/static/imghwm/default1.png"  data-src="1.png"    alt="js如何操作來實現點擊小圖展示出大圖的效果？ （程式碼範例）" >
    <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="js如何操作來實現點擊小圖展示出大圖的效果？ （程式碼範例）" >&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

這裡要了解的知識點是：jQuery 事件- click() 方法。

當點擊元素時，會發生 click 事件。

當滑鼠指標停留在元素上方，然後按下並放開滑鼠左鍵時，就會發生一次 click。

click() 方法觸發 click 事件，或規定發生 click 事件時執行的函數。

這篇文章關於js點擊縮圖切換大圖的相關知識介紹，希望對有需要的朋友有幫助。

【相關文章推薦】

利用JS實作點擊按鈕後圖片自動切換的簡單方法

jquery實作行動端點擊圖片看大圖特效_jquery

JS點擊小圖片關聯顯示大圖片

#使用JS實作點擊循環切換圖片（附程式碼）

#

以上是js如何操作來實現點擊小圖展示出大圖的效果？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！