JQ实现点击小图显示大图

最新推荐文章于 2025-07-12 10:27:42 发布

原创最新推荐文章于 2025-07-12 10:27:42 发布 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的小图点击后显示大图的效果。通过简单的HTML结构配合jQuery代码，可以在网页中实现图片预览功能。当用户点击小尺寸的缩略图时，全尺寸图片将以弹窗形式展示，并且页面背景会变暗，为用户提供更好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQ实现点击小图显示大图

代码块

js，例如：

 /*图片*/
    $('.imgJs').each(function() {
        var imgHeight = $(this).height(),
            aHeight = $(this).parent().height();
        if(imgHeight<aHeight){
            $(this).css({'height':aHeight,'width':'auto'})
        }
    });

    /*图片显示大图*/
    $('.deImg').each(function() {
        $(this).click(function(){
            $('body').css({'height':'100%','overflow':'hidden'});
            $('.imgBg').fadeIn(500);
            var src = $(this).attr('src');
            $('.showImg').attr('src',src);
            var winHeight = $(window).height();
            var imgHeight = $('.showImg').height();
            if(imgHeight<winHeight){
                var curHeight = winHeight -imgHeight;
                var radHeight = curHeight /2;
                $('.imgBgMain').css('margin-top',radHeight);
            }
        });
        $('.imgBg').click(function(){
            $('body').removeAttr('style');
            $(this).fadeOut(500);
        });
    });

html，例如：

<img src="images/icon_touxiang.png" class="user-img deImg imgJs">
   <div class="imgBg">
        <div class="imgBgMain">
            <img src="images/jsz_1.png" alt="" class="showImg" width="100%" />
        </div>
    </div>