放大镜

HTML

<ul class="one-model clearfix model_readonly phone_box">
                <li class="min" ng-mouseenter="min_mouse()" ng-mouseleave="min_out()" ng-mousemove="fd_move()">
                    ![]({{ pageEntity.certificatePhoneUrl }})
                    <div class="magnifier"></div>
                </li>
                <li class="max">
                    ![]({{ pageEntity.certificatePhoneUrl }})
                </li>
            </ul>

CSS

.model_readonly .min{
    width: 350px!important;
    height: 350px;
    border: 1px solid black;
    float: left;
    position: relative;
    cursor: crosshair;
}
.model_readonly .max{
    width: 350px;
    height: 350px;
    border: 1px solid black;
    float: left;
    display: none;
    overflow: hidden;
    position: relative;
}
.model_readonly .max img{
    position: absolute;
    margin: 0 auto;
}
.model_readonly .magnifier{
    width: 153.125px;
    height: 153.125px;
    background-color: skyblue;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    border-radius: 50%;
    border: 5px solid #000000;
    cursor: crosshair;
}

JS

$scope.min_mouse = function ()
        {
            //1.鼠标覆盖显示max和fd
            $('.max').css('display', 'block');
            $(".min .magnifier").css("display", "block");
        }
        $scope.min_out = function ()
        {
            //1.鼠标覆盖显示max和magnifier
            $('.max').css('display', 'none');
            $(".min .magnifier").css("display", "none");
        }
        
        $scope.fd_move = function ()
        {
            var min = document.querySelector(".min"),
                max = document.querySelector(".max"),
                img = document.querySelector(".max img"),
                magnifier = document.querySelector(".magnifier);
           
            //鼠标触摸的点
            var x = event.clientX - $(".min").offset().left - magnifier.offsetWidth/2;
            var y = event.clientY - $(".min").offset().top - magnifier.offsetHeight/2;
            
            //最大移动距离
            var maxX = min.clientWidth-magnifier.offsetWidth;
            var maxY = min.clientHeight-magnifier.offsetHeight;
            //边界判断
            if(x<=0){
                x=0;
            }else if(x>=maxX){
                x=maxX;
            }
            if(y<=0){
                y=0;
            }else if(y>=maxY){
                y=maxY;
            }
            //fd的位置
            magnifier.style.left = x+"px";
            magnifier.style.top = y+"px";
            //fd/min = max/img
            //移动比例
            var yidongX = x/maxX;
            var yidongY = y/maxY;
            //移动
            //3.max的对应显示
            // 对于大图而言 放大镜在小图上移动的比例 相当于img在可显示区域上移动的比例  放大镜右移等于图片左移
            // 也就是本质上为img - max 然而需要负值 则*-1 简化后 为max-img
            img.style.left = yidongX * (max.clientWidth - img.offsetWidth) + "px";
            img.style.top = yidongY * (max.clientHeight - img.offsetHeight) + "px";
        }