放大镜 · vue

``` //鼠标移动到相应位置，图片放大 <style> * { margin: 0; padding: 0; } #smallImg { width: 300px; height: 300px; background-image: url(./lou.jpg); background-size: cover; } #smallDiv { width: 100px; height: 100px; background-color: rgba(255, 0, 0, .2); display: none; position: absolute; } #bigDiv { width: 300px; height: 300px; /* border: 1px solid red; */ position: absolute; left: 300px; top: 0px; overflow: hidden; display: none; } #bigImg { width: 900px; height: 900px; position: absolute; } </style> </head> <body> <div class="fang"> <div id="smallImg"> <div id="smallDiv"></div> </div> <div id="bigDiv"> <img src="./lou.jpg" alt="" id="bigImg"> </div> </div> <script> // 逻辑： // 1.鼠标移入，出现小div（遮挡层）和大div（展示效果区域） // 鼠标移出，隐藏小div、大div let smallImg = document.getElementById("smallImg"); let smallDiv = document.getElementById("smallDiv"); let bigDiv = document.getElementById("bigDiv"); let bigImg = document.getElementById("bigImg"); smallImg.onmouseover = function(){ smallDiv.style.display = 'block'; bigDiv.style.display = 'block'; } smallImg.onmouseout = function(){ smallDiv.style.display = 'none'; bigDiv.style.display = 'none'; } // 2.小div移动方向和大图移动方向是相反的 // 2.1 先完成鼠标绑定遮挡层 // 鼠标移动距离大于遮挡层的移动距离 // 2.2 把小div和大图移动 OK // 3.核心：整个放大镜功能存在一个比例 // 小div/小图 = 大div/大图 // 100 / 300 = 300 / 900 // 分析：尺寸大小——>结论：3倍——>才是移动的距离 smallImg.onmousemove = function(e){ var e = e || window.event; // console.log(e.clientX,e.clientY); var x = e.clientX-50; var y = e.clientY-50; // 对移动范围进行判断 if(x>=200){ x=200; } if(x<=0){ x=0; } if(y>=200){ y=200; } if(y<=0){ y=0; } // 小div移动距离 smallDiv.style.left = x+'px'; smallDiv.style.top = y+'px'; // 大图移动距离 bigImg.style.left = -3*x+'px'; bigImg.style.top = -3*y+'px'; } </script> ``` 效果图： ![](https://img.kancloud.cn/72/77/72774a163eab96e93612ea4c6cbea96d_620x340.png)