js如何操作来实现点击小图展示出大图的效果？（代码示例）-js教程-PHP中文网

js如何操作来实现点击小图展示出大图的效果？（代码示例）

藏色散人

发布： 2018-08-11 16:20:45

原创

11215人浏览过

本篇文章主要给大家介绍如何实现js点击小图片显示大图即js点击小图预览大图，这种功能实现在网站建设过程中，难免会遇到这样的要求。特别对于多图的网站来说，缩略图的展示至关重要，那么要是能直接点击小图预览大图那更是高效率的展现。js点击图片放大并不是一件难操作的事。下面给大家带来具体代码演示。

js点击小图弹出大图的具体代码示例如下：

<div>
    <img class="dialog" src="1.png">
    <div id="dialog_large_image"></div>
</div>

登录后复制

<script type="text/javascript">
    $(function () {
        $("img.dialog").click(function() {
            var large_image = '<img src= ' + $(this).attr("src") + '</img>';
            $('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500));
        });
    });
</script>

登录后复制