放大镜效果

效果：

HTML：

CSS:

.zh-content{position: relative;}
.zh-plane-profile{position: absolute;z-index: 2;height: 420%;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-90deg);}

JS：

// 放大镜
function magnifyGlass(bigImg) {
    // 放大镜元素
    var mgEleId = 'zh_magnify_glass',
        mgEleWth = 200,
        mgEleHgt = 200;
    var mgEle = $('
');
    mgEle.css({
        position: 'fixed',
        zIndex: 99999,
        width: mgEleWth,
        height: mgEleHgt,
        border: '1px solid #3C7FCD',
        borderRadius: '50%',
        transform: 'rotate(-90deg)',
        overflow: 'hidden'
    });
    // 大图
    var bigImgEle = $('');
    bigImgEle.css({
        position: 'absolute',
        zIndex: 2,
        left: 0,
        top: 0
    });
    // 大图加载完成
    bigImgEle[0].onload = function() {
        var bigImgWth = this.width,
            bigImgHgt = this.height;
        mgEle.append(bigImgEle);
        // 事件
        $('.zh-plane-profile').mouseenter(function(e) {
            var imgWth = $(this).height(),
                imgHgt = $(this).width(),
                imgOffetLeft = $(this).offset().left,
                imgOffetTop = $(this).offset().top;
            mgEle.css({
                left: e.clientX-mgEleWth/2,
                top: e.clientY-mgEleHgt/2
            });
            if($('#'+mgEleId).size() == 0) {
                $('body').append(mgEle);
            }
            // 事件
            $(document).on('mousemove', function(e) {
                var endX = e.clientX,
                    endY = e.clientY;
                if(endXimgWth+imgOffetLeft || endYimgHgt+imgOffetTop) {
                    $('#'+mgEleId).remove();
                    $(document).off('mousemove');
                } else {
                    var translateX = -(endX-imgOffetLeft)/imgWth*bigImgHgt+mgEleWth/2,
                        translateY = -(bigImgWth-(endY-imgOffetTop)/imgHgt*bigImgWth-mgEleHgt/2);
                    $('#'+mgEleId).css({
                        left: endX-mgEleWth/2,
                        top: endY-mgEleHgt/2
                    });
                    $('#'+mgEleId+' img').css({
                        transform: 'translate('+translateY+'px, '+translateX+'px)'
                    });
                }
            });
        });
    }
}

调用：

magnifyGlass('大图url');

原图：

由于原图是竖着的，所以代码里有了针对竖图的处理。。。