JQ achieve Click thumbnail to show larger image

JQ achieve Click thumbnail to show larger image

Block

js, for example:

 /*图片*/
    $('.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, for example:

<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>