购物简单的放大镜

思路：
1.写好css样式
2.获取显示大图比例算出 放大镜的宽度
3.根据放大镜在图片中移动的距离求出大图片现实的位置
4.鼠标移入container事件 移除事件

代码如下
css代码：
<style>
    .container{
        width: 450px;
        height: 450px;
        position: absolute;
        margin: 50px;
        border: 1px solid #000;
    }
    .s-img{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0
    }
    .s-img img{
        width: 100%;
    }
    .b-img{
        width: 540px;
        height: 540px;
        position: absolute;
        top:0;
        left: 460px;
        border: 1px solid #000;
        background: url(./1.jpg) no-repeat;
        display:none
    }
    .magnifier{
        width: 300px;
        height: 300px;
        position: absolute;
        background: rgba(201, 233, 21, 0.4);
        display: none;
    }
</style>



html代码：
<div class="container">
    <div class="s-img">
        <img src="./1.jpg">
    </div>
    <div class="magnifier"></div>
    <div class="b-img"></div>
</div>


js代码：

<script>
    var bImg=document.querySelector('.b-img');
    var magnifier=document.querySelector('.magnifier');
    var container=document.querySelector('.container')；
    //声明大图片为800
    var size=800;
    var sImgSize=450;

    container.onmouseover=function(e){
        e.preventDefault();
        magnifier.style.display=bImg.style.display='block';
        //运用比例算出放大镜的宽高（例子为正方形 所以宽高都一样）
        magnifier.style.width=magnifier.style.height=bImg.offsetWidth/size*sImgSize+'px';
        container.onmousemove=function(e){
            //算出放大镜的left和top值
            var x=e.pageX-container.offsetLeft-magnifier.offsetWidth/2;
            var y=e.pageY-container.offsetTop-magnifier.offsetWidth/2;
            //最大的位移值
            var maxWidth=container.offsetWidth-magnifier.offsetWidth;
            //给放大镜设置边距  不能超出容器
            if(x<0) x=0;
            if(y<0) y=0;
            if(x>maxWidth){
                x=maxWidth
            }
            if(y>maxWidth){
                y=maxWidth
            }
            magnifier.style.left=x+'px';
            magnifier.style.top=y+'px';
            //x/maxWidth、、y/maxWidth 坐标的比例
            var dx=x/maxWidth*(size-bImg.offsetWidth);
            var dy=y/maxWidth*(size-bImg.offsetWidth);
            bImg.style.backgroundPosition=`-${dx}px -${dy}px`
        }
     }
     //移除容器将放大镜和大图隐藏
     container.onmouseout=function(){
        magnifier.style.display=bImg.style.display='';
    }