模仿知乎的查看大图效果(JQuery)

模仿知乎的点击图片查看大图效果写了一个差不多的,记录一下代码.

//JavaScript
      $(function() {
        $('body').on('click', '.viewBigImg', function() {
            var windowWidth, windowHeight;
            windowHeight = window.innerHeight
            windowWidth = window.innerWidth
            $('.previewOverlay').remove()
            var boxWidth = $(this).width() //获取元素图片宽度
            var boxHeight = $(this).height() //获取元素图片高度
            var targetTop = $(this).offset().top
            var targetLeft = $(this).offset().left
            var viewOffset = {
                top: '',
                left: '',
            }
            var img = this
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            var myPromise = new Promise(function(resolve, reject) {
                if (img.naturalWidth) {
                    var originalSize = {
                        width: img.naturalWidth > (windowWidth * 0.8) ? (windowWidth * 0.8) : img.naturalWidth, //获取图片原始宽度(不超过600)
                        height: img.naturalWidth > (windowWidth * 0.8) ? ((windowWidth * 0.8) / img.naturalWidth) * img.naturalHeight : img.naturalHeight, //获取图片原始高度
                    }
                } else {
                    var image = new Image()
                    image.src = img.src
                    image.onload = function() {
                        var originalSize = {
                            width: image.width > (windowWidth * 0.8) ? (windowWidth * 0.8) : image.width, //获取图片原始宽度(不超过600)
                            height: image.width > (windowWidth * 0.8) ? ((windowWidth * 0.8) / image.width) * image.height : image.height, //获取图片原始高度
                        }
                        resolve(originalSize)
                    }
                }
                resolve(originalSize)
            }).then(function(originalSize) {
                var imgProportion = {
                    x: originalSize.width / boxWidth, //计算宽度比例
                    y: originalSize.height / boxHeight, //计算高度比例
                }
                var targetSrc = $(img).attr('src')
                var preview = $('
' + '
' + '![](' + targetSrc + ')' + '
' + '
')
                viewOffset.top = (windowHeight - originalSize.height) / 2 //计算出居中的位置坐标
                viewOffset.left = (windowWidth - originalSize.width) / 2 //计算出居中的位置坐标
                    // $('body').css('padding-left',window.innerWidth - document.body.clientWidth)
                document.body.style.setProperty('padding-right', window.innerWidth - document.body.clientWidth, 'important');
                $('body').css('overflow', 'hidden')
                $('body').append(preview) //插入放大图片
                $('.previewImgBox img').css('opacity', 0)
                $('.previewImgBox img').css('transform', 'translate3d(' + $(img).offset().left + 'px,' + ($(img).offset().top - scrollTop) + 'px, 0px)') //设置图片初始位置
                var timeOpen = setTimeout(function() {
                    $('.previewOverlay').addClass('prevActive')
                    $('.previewImgBox img').css('opacity', 1)
                    $('.previewImgBox img').css('transform', 'translate3d(' + viewOffset.left + 'px,' + viewOffset.top + 'px, 0px) scale3d(' + imgProportion.x + ',' + imgProportion.y + ', 1)')
                    $('.previewImgBox').addClass('activing')
                }, 0)

                $('body').on('click', '.previewImgBox img', function() {
                    $('.previewOverlay').removeClass('prevActive')
                    $('.previewImgBox img').css('transform', 'translate3d(' + targetLeft + 'px,' + (targetTop - scrollTop) + 'px, 0px)')
                    setTimeout(function() {
                        $('.previewOverlay').remove()
                        $('.previewImgBox').removeClass('activing')
                        $('body').css('overflow', '')
                        $('body').css('padding-right', '')
                    }, 300)
                    clearTimeout(timeOpen)
                })
            }).catch((err) => {
                console.log(err)
            })
        })
    })

//CSS
.previewOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    transition: background-color 0.2s ease-in-out;
    &.prevActive {
        background-color: hsla(0, 0%, 100%, .9);
    }
}

.previewImgBox {
    width: 100%;
    height: 100%;
    overflow: auto;
    &.activing {
        img {
            transition: -webkit-transform .3s ease-in-out;
            transition: transform .3s ease-in-out;
            transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
            cursor: zoom-out;
            transform-origin: top left;
        }
    }
}

.viewBigImg{
    cursor: zoom-in !important;
}