放大鏡制作

<div class="box" id="box"><!--左側的盒子--><div class="small"><!--圖片--><img src="images/big.jpg" width="350" class="aaa" alt=""/><!--黃色小盒子--><div class="mask"></div></div><!--右側的盒子--><div class="big"><!--右側盒子內的大圖片--><img src="images/big.jpg" width="800" alt=""/></div> </div> * {margin: 0;padding: 0;}.box {width: 350px;height: 350px;margin: 100px;border: 5px solid black;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.mask {width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0px;left: 0px;cursor: move;display: none;}.small {position: relative;}.aaa {vertical-align: middle;}.big {position: relative;top: -350px;}.big img {position: absolute;} <script>//步驟分析：//1 鼠標移入移出，顯示隱藏左側遮罩層與右側大盒子//2 遮罩層居中跟隨鼠標//3 給運動位置設置運動邊界//4 設置右側大圖的對應運動即可//1 獲取元素var box = document.getElementById("box");//最外側的父盒子var smallBox = box.children[0];//左側的父盒子var mask = smallBox.children[1];//遮罩層黃盒子var bigBox = box.children[1];//右側的父盒子var bigImg = bigBox.children[0];//2 設置移入移出效果box.onmouseover = function () {mask.style.display = "block";bigBox.style.display = "block";};box.onmouseout = function () {mask.style.display = "none";bigBox.style.display = "none";};//3 鼠標在smallBox內部移動時，居中跟隨smallBox.onmousemove = function (e) {var e = e || window.event;//事件對象兼容//計算mask的運動位置 : 鼠標坐標 - box的外部距離 - mask寬高的一半var x = e.clientX - box.offsetLeft - mask.offsetWidth / 2;var y = e.clientY - box.offsetTop - mask.offsetHeight / 2;//4 設置運動的邊界x = x < 0 ? 0 : x;//最小值檢測y = y < 0 ? 0 : y;//計算最大值var maxLeft = smallBox.offsetWidth - mask.offsetWidth;var maxTop = smallBox.offsetHeight - mask.offsetHeight;x = x > maxLeft ? maxLeft : x;//最大值檢測y = y > maxTop ? maxTop : y;//設置給mask的left與topmask.style.left = x + "px";mask.style.top = y + "px";//設置右側的大圖對應運動//先計算出運動的比例//1 情況1所有的盒子均對應成比例var biliX = mask.offsetWidth / (bigBox.offsetWidth - 2);//注意，邊框不是可運動的范圍，計算時進行去除即可var biliY = mask.offsetHeight / (bigBox.offsetHeight - 2);//由于，運動的步長為小步長，比例也是小比例，采用除法bigImg.style.left = -x / biliX + "px";bigImg.style.top = -y / biliY + "px";//2 情況2如果盒子不是等比例，可以采用可運動距離比的計算方式//總距離= 步長*步數 在這個操作中步數是固定的(靠一個事件觸發，次數是一定的)//總距離可求，計算出總距離比，就可以計算出某個元素運動的步長};</script>

效果圖為：

images

總結

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

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