放大鏡 · 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)