最简单原生js实现京东放大镜效果

最简单原生js实现京东放大镜效果

具体效果如图下，左边半透明小罩罩是放大镜，右边大框框是显示效果啦

需求分析一下下

1.我们得做一个小罩罩（放大镜），这个小罩罩得跟着我们走哦
2.我们得根据小罩罩的位置，让我们的大框框显示放大后图片对应的位置呀

呀呀呀太难说了，直接上代码吧

html结构

我把结构分成了两部分，第一部分是放原图和放大镜的，第二部分是放大后的效果图的。

<div class="box">
        <!-- 原图和放大镜 -->
        <div class="box1">
            <img src="images/u0.jpg" alt="">
            <div class=" magnifyingGlass"></div>
        </div>
        <!-- 放大效果展示 -->
        <div class="box2">
            <img src="images/u0.jpg" alt="">
        </div> 
    </div>

css样式

css要注意的是一定要有定位哦，因为我们得通过定位让放大镜移动嘛，放大效果图也一样的哦。

  *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 700px;
            height: 350px;
            border: 1px solid black;
        }
        .box>.box1{
            position: relative;
            width: 300px;
            height: 150px;
            cursor: pointer;
          
        }
        .box>.box1>img{
            width: 100%;
            height: 100%;
       
        }
        .box>.box1>.magnifyingGlass{
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: rgba(31, 29, 30, 0.5);
        }


        .box>.box2{
            position: absolute;
            right: 50px;
            top: 0;
            width: 250px;
            height: 250px;
            border: 1px solid pink;
            overflow: hidden;
        }
        .box>.box2>img{
            position: absolute;
            width: 1500px;
            height: 750px;
            top: 0;
            left: 0;
        }

js行为代码

这个每一点我都有注释哦，超良心博主就是my啦

  // 获取dom元素呀
       var bigGlass = document.querySelector('.magnifyingGlass')
       var box1 = document.querySelector('.box1')
       var img = document.querySelectorAll('img')[1]
        // 先让小罩罩和大框框里面的图片隐藏哦
       img.style.display = 'none'
       bigGlass.style.display = 'none'
    //    这个是鼠标在浏览器上滑动触发的事件啦
       document.onmousemove = function(e){
        //    这个是要做一下兼容处理啦
           var ev = e || event
        //    这个是获取鼠标移动时的x,y坐标哦，这个25其实是小罩罩宽度的一半啦，其实是我想让鼠标在罩罩的中心啦。 
             var x = ev.clientX-25
             var y = ev.clientY-25
            //  这个就可以让小罩罩跟着鼠标移动啦
             bigGlass.style.left = x+'px'
            //  这个是让放大效果图跟着鼠标移动啦，这个5呢，我是让图片放大到了原图的5倍哦
             img.style.left = -x*5+'px'
             bigGlass.style.top = y+'px'
             img.style.top = -y*5+'px'
            // 这里做了一下条件处理呀，当到达一个值让我们的小罩罩和效果图显示或隐藏啦
           if(ev.clientX>300||ev.clientY>150||ev.clientX<2||ev.clientY<2){
               bigGlass.style.display = 'none'
               img.style.display = 'none'
           }else{
            bigGlass.style.display = 'block'
            img.style.display = 'block'
           }

       }        

一个前端小白的日常找存在感，如果这文章给到了你那么一丢丢的帮助，记得点赞噢，如果发现本人的代码有误的地方，一定要告诉人家啦，咱们一起进步哟。