<div class="box" id="box"><!--左側的盒子--><div class="left_img"><!--圖片--><img src="images/small.jpg" class="aaa" alt="小圖片"/><!--黃色小盒子--><div class="mask"></div></div><!--右側的盒子--><div class="right_img"><!--右側盒子內的大圖片--><img src="images/big.jpg" alt="大圖片"/></div></div>

注意：此處的css結構，根據自己的書寫方式進行描述即可

*{margin: 0;padding: 0;/* box-sizing: border-box; */}.box{width: 1230px;height: 800px;margin: 100px auto;/* border: 1px solid black; */}.left_img{width: 400px;height: 400px;/* border: 5px solid black; */float: left;position: relative;}.left_img .mask{position: absolute;left: 0;top: 0;width: 200px;height: 200px;background-color: yellow;opacity: 0.5;display: none;cursor: move;}.right_img{position: relative;overflow: hidden;width: 400px;height: 400px;/* border: 5px solid black; */margin-left: 10px;float: left;display: none;}.right_img img{position: absolute;top: 0;left: 0;} // var box = document.querySelector('.box');var mask = document.querySelector('.mask');var right_img = document.querySelector('.right_img');var left_img = document.querySelector('.left_img');var rightImg = document.querySelector('.right_img img');//鼠標進入時，黃色盒子和右盒子進行隱藏left_img.addEventListener('mouseenter',function(){mask.style.display = 'block';right_img.style.display = 'block';//給盒子設置鼠標進入事件left_img.onmousemove = function(e){//遮蓋的小盒子跟隨鼠標的位置進行移動//鼠標的橫坐標 = 鼠標距離整個頁面左側的距離 - 當前盒子左側的距離//鼠標的縱坐標 = 鼠標距離整個頁面上方的距離 - 當前盒子上方的距離 //mask.offsetWidth / 2; , mask.offsetHeight / 2; 是為了讓鼠標的位置在遮罩盒子的正中央顯示var mx = e.clientX - this.offsetLeft - mask.offsetWidth / 2;var my = e.clientY - this.offsetTop - mask.offsetHeight / 2;//將鼠標的位置信息賦值給當前的遮罩盒子// mask.style.left = mx + 'px';// mask.style.top = my + 'px';//限制元素水平方向移動的最小距離 + 元素在水平方向最大的橫坐標var min_x = 0;var max_x = left_img.offsetWidth - mask.offsetWidth;var min_y = 0;var max_y = left_img.offsetHeight - mask.offsetHeight;//要用鼠標實時的位置 和 限制的范圍比較//水平方向的位置進行比較mx = mx <= min_x ? min_x : mx;mx = mx >= max_x ? max_x : mx;//垂直方向的位置進行比較my = my <= min_y ? min_y : my;my = my >= max_y ? max_y : my;//最后將限制后的位置賦值給遮罩盒子mask.style.left = mx + 'px';mask.style.top = my + 'px';//實現右側盒子中大圖片的移動//左側遮罩盒子移動的距離：左側盒子的寬度 = 右側圖片移動的距離 ： 右側圖片的寬度//例如：1 ：1 = 2 ：2//右側圖片的移動距離 = 左側遮罩盒子移動的距離 * 右側圖片的寬度 / 左側盒子的寬度；// 例如：2 = 1 * 2 / 1rightImg.style.left = - mx * rightImg.offsetWidth / left_img.offsetWidth + 'px';rightImg.style.top = - my * rightImg.offsetHeight / left_img.offsetHeight + 'px';}});//鼠標離開時，黃色盒子和右盒子進行隱藏left_img.addEventListener('mouseleave',function(){mask.style.display = 'none';right_img.style.display = 'none';});

實現效果：

總結

以上是生活随笔為你收集整理的放大镜制作（2）—此方法比较容易理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。