放大镜

1.实现效果

很多大型网站像京东淘宝小米手机栏里面都有放大镜的效果，并且可以切换图片，下面可以借鉴一下我的思路。

可以看下实图效果

2.主体部分

结构的话包含左右两个部分
左边大盒子里面包含两个小盒子，上面的话就是显示图片，包括图片切换功能的四个小盒子，右边就主要是实现放大镜的功能。

3.注意的事项

（1） 左边盒子和遮罩层的大小比例 = 右边盒子与大图的比例
（2）遮罩层走的方向和大图移动的方向是相反的
（3）大图的移动比例 = 大图的移动范围 / 遮罩层的移动范围

下面的话就是代码块
左边大盒子 图片 遮罩层
右边显示的小盒子 大图

4.代码块

这里的代码块是用背景图片写的，控制背景定位实现图片移动
下面还有第二种方式哦
第二种的话就是直接用图片写的

<div class="box">
        <div class="box1">
            <div class="shadow"></div>
        </div>
        <div class="small">
            <div class="sOne"></div>
            <div class="sTwo"></div>
            <div class="sThree"></div>
            <div class="sFour"></div>
        </div>
        <div class="box2"></div>
    </div>

图片的可以直接差图片，我是用背景图片写的，原理都是一样的， 实现点击图片切换图片的时候，改变一下图片的路径就可以啦

*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 625px;
            border: 1px solid #f00;
            margin-left: 100px;
        }
        .box1{
            height: 500px;
            position: relative;
            /* background-color: turquoise; */
            background-image: url(1\ \(1\).gif);
            background-size: 500px 500px;
        }
        .small{
            height: 125px;
            background-color: salmon;
            display: flex;
            /* border: 1px solid #000; */
        }
        .sOne,.sTwo,.sThree,.sFour{
            width: 125px;
            height: 125px;
            background-size:125px 125px;
            border: 1px solid #f00;
            margin-left: -1px;
        }
        
        .sOne{
            background-image: url(1\ \(1\).gif);
            
        }
        .sTwo{
            background-image: url(../day15/1\ \(5\).jpg);
        }
        .sThree{
            background-image: url(../day15/1\ \(6\).jpg);
        }
        .sFour{
            background-image: url(../day15/1\ \(8\).jpg);
        }
        /* 左边盒子和遮罩层的大小比例 = 右边盒子与大图的比例 */
        .shadow{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            position: absolute;
            opacity: .7;
        }
        .box2{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            background-image: url(1\ \(1\).gif);
            background-repeat: no-repeat;
            background-size: 2500px 2500px;
            position: fixed;
            left: 700px;
            top: 0;
            background-position: 0 0;
        }

//获取对象
    var oBox = document.querySelector('.box');
    var oBox1 = document.querySelector('.box1');
    var oSmall = document.querySelectorAll('.small');
    
    //事件委托
    oBox.addEventListener('click',function(e){
        var e = event || e;
        var target = e.target || e.srcElement;
        if(target.className == 'sOne'){
            // 通过自己找到box1这个大盒子，并将自己图片的路径赋值给box1，下面的话也都是一样的
            target.parentNode.previousElementSibling.style. backgroundImage = getComputedStyle(target)['background-image'];
            target.parentNode.nextElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
        }
        if(target.className == 'sTwo'){
            target.parentNode.previousElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
            target.parentNode.nextElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
        }
        if(target.className == 'sThree'){
            target.parentNode.previousElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
            target.parentNode.nextElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
        }
        if(target.className == 'sFour'){
            target.parentNode.previousElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
            target.parentNode.nextElementSibling.style.backgroundImage = getComputedStyle(target)['background-image'];
        }
    })

    //获取元素
    var oshadow = document.querySelector('.shadow');
    var oBox2 = document.querySelector('.box2');
   //鼠标跟随移动
   oBox1.onmousemove = function(e){
       var ev = event || e;
       //控制遮罩层移动并使鼠标在遮罩层的中间位置
       var left = ev.x -oBox.offsetLeft - oshadow.offsetWidth/2;
       var top = ev.y -oBox.offsetTop - oshadow.offsetHeight/2;
       //判断边距位置
       if(left < 0){
           left = 0;
       }
       if(top< 0){
           top=0;
       }
       if(left > oBox1.clientWidth - oshadow.offsetWidth){
           left=oBox1.clientWidth - oshadow.offsetWidth
       }
       if(top > oBox1.clientHeight - oshadow.offsetHeight){
           top=oBox1.clientHeight - oshadow.offsetHeight;
       }
       //利用模板字符串赋值控制遮罩层的移动
       oshadow.style.cssText += `left:${left}px;top:${top}px;`
       
    //    我设置的左右比例是1:5,左边移动一步右边走五步
       var box2Left = left * 5;
       var box2Top = top * 5;
       //赋值背景定位控制图片的位置
       oBox2.style.cssText += `background-position: -${ box2Left}px -${box2Top}px`
   }

5.第二种方法

因为原理都是一样的我就直接上代码啦

<div class="box">
        <div class="left">
            <img src="../images/1.jpg" alt="">
            <div class="shadow"></div>
        </div>
        <div class="right">
            <img src="../images/1.jpg" alt="">
        </div>

        <div style="clear: both;"></div>
        <ul>
            <li>
                <img src="../images/1.jpg" data-small="../images/11.jpg" alt="">
            </li>
            <li>
                <img src="../images/2.jpg" data-small="../images/2.jpg" alt="">
            </li>
             <li>
                <img src="../images/3.jpg" data-small="../images/3.jpg"  alt="">
            </li>
            <li>
                <img src="../images/4.jpg" data-small="../images/4.jpg"  alt="">
            </li>
        </ul>
    </div>

*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1200px;
            margin: 50px auto;
        }
        .left{
            width: 400px;
            height: 400px;
            position: relative;
            float: left;
        }
        .left img{
            width: 400px;
            height: 400px;
        }
        .shadow{
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .right {
            width: 300px;
            height: 300px;
            float: left;
            margin-left: 40px;
            display: none;
            position: relative;
            overflow: hidden;
        }
        .right img{
            width: 1200px;
            height: 1200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul{
            display: flex;
            list-style: none;
        }
        ul img{
            width: 80px;
            height: 80px;
            margin: 10px;
        }

 //获取元素
        var oShadow = document.querySelector('.shadow') ;
        var oLeft = document.querySelector('.left') ;
        var oRight = document.querySelector('.right') ;
        var oBox = document.querySelector('.box');
        var oBigImg = document.querySelector('.right img') ;

        // oShadow  display:none   因此元素的css获取不到
        // var r = oShadow.offsetWidth / 2;

        oLeft.addEventListener('mouseover' , function(){
            // 鼠标经过遮罩层和右边显示
            oShadow.style.display = 'block' ;
            oRight.style.display = 'block' ;
            //遮罩层宽高的一半
            var r = oShadow.offsetWidth / 2;
            //设置最大边距
            var maxLeft = oLeft.clientWidth - oShadow.offsetWidth ;
            var maxTop = oLeft.clientHeight - oShadow.offsetHeight ;

            document.onmousemove = function(e){
                var e = event || e ; 
                var left = e.x - oBox.offsetLeft - r ;
                var top = e.y - oBox.offsetTop - r ;
                if(left < 0) {
                    left = 0
                }
                if(top < 0) {
                    top = 0 ;
                }
                if(left > maxLeft) {
                    left = maxLeft
                }
                if(top > maxTop) {
                    top = maxTop
                }
                // oShadow.style.cssText = `display:block;left:${left}px;top:${top}px` ;

                //赋值
                oShadow.style.left = left + 'px' ;
                oShadow.style.top = top + 'px' ;

                // 大图的宽度
                var bigW = parseInt(getStyle(oBigImg , 'width')) ;
                // 大图显示区的宽度
                var bigSHowW = parseInt(getStyle(oRight , 'width')) ;

                // 左边图的宽度
                var leftW = parseInt(getStyle(oLeft , 'width'))
                // 左边遮罩层的宽度
                var oShadowW = parseInt(getStyle(oShadow , 'width'))
                var scale = (bigW - bigSHowW) / (leftW - oShadowW) ;
                oBigImg.style.left = -left * scale + 'px' ;
                oBigImg.style.top = -top * scale + 'px' ;
            }
        })

        // 鼠标离开左边的大盒子就遮罩层消失
        oLeft.addEventListener('mouseout' , function() {
            oShadow.style.display = 'none';
            document.onmousemove = null ;
        })

        // 切换图片
            // 换路径  
        var oUl = document.querySelector('ul') ;
        var oLeftImg = document.querySelector('.left img') ;
        oUl.addEventListener('mouseover' , function(e) {
            var e = event || e ; 
            var target = e.target ;
            if(target.tagName === 'IMG') {
                var src = target.getAttribute('data-small');
                console.log(src);
                oLeftImg.src = src ;
                oBigImg.src = src ;
            }
        })

        function getStyle(ele , property) {
            if(window.getComputedStyle) {
                return getComputedStyle(ele)[property]
            }
            return ele.currentStyle(property)
        }

相互学习，共同进步！
加油!
奥利给！