页面图片放大镜效果

实现网页中图片的放大镜效果

效果如下

布局思路

一.设置一个外层盒子
二.外层盒子内放置左右两个盒子
三.左边盒子（minBox）放置一张图片和一个p标签（作为移动蒙版）
四.右边盒子（maxBox）作为视口并放置一张更大的图片（设置overflow：hidden；移动大图片的位置实现放大效果）

布局结构

<div class="outer">
    <div class="minbox">
        <img src="./images/timg.jpg" alt="">
        <p class="mask"></p>
    </div>
    <div class="bigbox">
        <img src="./images/timg.jpg" alt="">
    </div>
</div>

css样式

<style>
        *{
            margin:0px;
            padding:0px;
        }
        .outer{
            position:relative;
            margin: 50px auto;
        }
        .outer:after{
            content: "\200B";
            display:block;
            height:0;
            clear:both;
        }
        .outer>.minbox{
            width:400px;
            height:200px;
            border:1px solid #888888;
            float: left;
            position: relative;
        }
        .outer>.minbox>img{
            width:400px;
            height:200px;
        }
        .outer>.minbox>.mask{
            width:100px;
            height:100px;
            background-color: rgba(135, 223, 170, 0.58);
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
        .outer>.bigbox{
            width:250px;
            height:250px;
            position: absolute;
            left:402px;
            top:0px;
            overflow: hidden;
            display:none;
        }
        .outer>.bigbox>img{
            width:800px;
            height:400px;
        }
    </style>

js行为思路

一.鼠标移入minBox时蒙版和右边的视口出现
二.鼠标在minBox内移动时保持鼠标在蒙版正中间并判断蒙版可移动的最大和最小范围
三.计算大图要移动的距离比例（我用的是长方形图片，所以要分别计算宽比和高比）
四.鼠标移出蒙版和右边的视口消失

js代码

<script>
    oMinBox = document.querySelector('.outer>.minbox')
    oMask = document.querySelector('.outer>.minbox>.mask')
    oBigBox = document.querySelector('.outer>.bigbox')
    oImg = document.querySelector('.outer>.bigbox>img')

    oMinBox.onmouseenter = function (e){
        var e = e || window.event
        oMask.style.display = "block"
        oBigBox.style.display = "block"
        oMinBox.onmousemove = function(e){
            var e = e || window.event
            var maskPosition = {
                left:e.clientX - oMask.offsetWidth/2 - oMinBox.getBoundingClientRect().left,
                top:e.clientY - oMask.offsetHeight/2 - oMinBox.getBoundingClientRect().top
            }
            if(maskPosition.left<=0){
                maskPosition.left = 0
            }else if(maskPosition.left>=oMinBox.clientWidth - oMask.offsetWidth){
                maskPosition.left = oMinBox.clientWidth - oMask.offsetWidth
            }
            if(maskPosition.top<=0){
                maskPosition.top = 0
            }else if(maskPosition.top>=oMinBox.clientHeight - oMask.offsetHeight){
                maskPosition.top = oMinBox.clientHeight - oMask.offsetHeight
            }
            oMask.style.left = maskPosition.left + 'px'
            oMask.style.top = maskPosition.top + 'px'

            //计算比例
            var scaleWidth = (oImg.clientWidth - oBigBox.offsetWidth)/(oMinBox.clientWidth - oMask.offsetWidth)
            var scaleHeight = (oImg.clientHeight - oBigBox.offsetHeight)/(oMinBox.clientHeight - oMask.offsetHeight)
            var bigBoxPosition = {
                left:maskPosition.left * scaleWidth,
                top:maskPosition.top * scaleHeight
            }
            oImg.style.marginLeft = -bigBoxPosition.left + 'px'
            oImg.style.marginTop = -bigBoxPosition.top + 'px'
        }
    }
    oMinBox.onmouseleave = function(e){
        var e = e || window.event
        oMask.style.display = "none"
        oBigBox.style.display = "none"
    }