放大镜

css部分

<style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 430px;
            height: 430px;
            margin: 30px;
            position: relative;
        }
        .small{
            width: 430px;
            height: 430px;
            position: relative;
        }

        .small:hover{
            cursor: move;
        }

        .small .mask{
            width: 200px;
            height: 200px;
            background-image: url("../img/dd.png");
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .big{
            width: 430px;
            height: 430px;
            overflow: hidden;
            position: absolute;
            left: 110%;
            top: 0;
            display: none;

        }

        .big img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

HTML部分

<div class='box'>
	<!--小图容器-->
    <div class='small'>
        <img src="../img/goods1.jpg" alt="">
        <!-- 放大镜蒙版  -->
        <div class='mask'></div>
    </div>
    <!-- 大图的容器要小  图片能来回移动 -->
    <div class='big'>
        <img src="../img/goods2.jpg" alt="">
    </div>
</div>

js

<script>
    //小图存放的容器
    var osmall=document.getElementsByClassName('small')[0];
    var simg=osmall.children[0];
    //蒙版
    var omask=document.getElementsByClassName('mask')[0];
    var obig=document.getElementsByClassName('big')[0];
    var bimg=obig.children[0];
    //鼠标移入事件
    osmall.onmouseenter=function () {
        omask.style.display='block';
        obig.style.display='block';
    }
    
    //鼠标移动的过程中蒙版跟着动
    osmall.onmousemove=function (e) {
        //让鼠标的位置放在蒙版中间
        var x=e.clientX-this.offsetParent.offsetLeft-omask.offsetWidth/2;
        var y=e.clientY-this.offsetParent.offsetTop-omask.offsetHeight/2;
        //限定蒙版移动的区域
        if(x<0){
            x=0;
        }else if(x>osmall.offsetWidth-omask.offsetWidth){
            x=osmall.offsetWidth-omask.offsetWidt;
        }
        if(y<0){
            y=0;
        }else if(y>osmall.offsetHeight-omask.offsetHeight){
            y=osmall.offsetHeight-omask.offsetHeight;
        }
        omask.style.left=x+'px';
        omask.style.top=y+'px';
        //大图移动的位置 =  大图和小图的比值 * 小图移动的left和top偏移量(他们都是负值)
        //因为是在大图的基础上移动，向右 向下。
        var dX=bimg.offsetWidth/simg.offsetWidth
        var dy=bimg.offsetHeight/simg.offsetHeight;
        bimg.style.left=-x*dX+'px';
        bimg.style.top=-y*dy+'px';
    }

    //鼠标移出
    osmall.onmouseleave=function () {
        omask.style.display='none';
        obig.style.display='none';
    }

</script>

图片素材



offsetWidth 自身的宽度 (计算padding和border)
clientWidth 自身 的宽度 (计算padding);
offSetParent 返回最靠近当前元素的上层元素(查找父级)。注意：这个元素的position(定位)必须不是static; 否则会找到body;
鼠标事件：
clientX clientY 鼠标在客户端视口中的坐标
pageX pageY 鼠标在页面中的坐标
两者在没有上下滚动条的情况下是一样的；