JQ实现点击小图显示大图

最新推荐文章于 2024-08-21 23:57:05 发布

bai小白

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量1.2w

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/wwj791859814/article/details/77119710

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>