js放大鏡
阿新 • • 發佈：2019-01-12
解釋都在程式碼裡面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>放大鏡</title> </head> <style> .Box { margin-top: 200px; margin-left: 200px; width: 250px; height: 350px; position: relative; } .smallBox { width: 350px; height: 350px; position: relative; } .smallBox img { width: 100%; height: 100%; } .smallBox #mask { position: absolute; left: 0; top: 0; width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); cursor: move; display: none; } #big_box { width: 400px; height: 400px; overflow: hidden; position: absolute; top: 0px; left: 360px; display: none; } #big_box>img { position: absolute; } img { display: block; } </style> <body> <!-- 這個需要兩張圖片，按一定的比例的圖片，由於找不到兩張一樣的圖片，所以就用了同一張圖片 --> <div class="Box" id="box"> <div class="smallBox" id="small_box"> <img src="https://img.alicdn.com/imgextra/i3/272205633/TB1KzRenwZC2uNjSZFnXXaxZpXa_!!0-item_pic.jpg_430x430q90.jpg" /> <div id="mask"></div> </div> <div class="bigBox" id="big_box"> <img src="https://img.alicdn.com/imgextra/i3/272205633/TB1KzRenwZC2uNjSZFnXXaxZpXa_!!0-item_pic.jpg_430x430q90.jpg" id="bigImg" /> </div> </div> </div> <script> function getDomId(id) { return document.getElementById(id); } function Glass() { this.box = getDomId("box"); this.bigBox = getDomId("big_box"); this.smallBox = getDomId("small_box"); this.mask = getDomId("mask"); this.bigImg = getDomId("bigImg"); } Glass.prototype.init = function () { let that = this; that.box.onmousemove = function (event) { let events = event || window.event; //求滑鼠當前位置距離盒子左邊的距離=滑鼠當前位置-盒子距離左邊的位置 let maskX = events.pageX - that.box.offsetLeft; console.log(maskX + ' ' + 'X') //求滑鼠當前位置距離盒子上邊的距離=滑鼠當前位置-盒子距離上邊邊的位置 let maskY = events.pageY - that.box.offsetTop; console.log(maskY + ' ' + 'Y'); // 讓滑鼠處於陰影盒子的中間位置 let maskXs = maskX - that.mask.offsetWidth / 2; console.log(maskXs + ' ' + 'Xs') let maskYs = maskY - that.mask.offsetHeight / 2; console.log(maskYs + ' ' + 'Ys'); //判斷上下左右的臨界點 if (maskXs < 0) { maskXs = 0; } if (maskYs < 0) { maskYs = 0; } //判斷 遮罩層 左右 能移動的最大距離 如果超出就等於它可移動的最大距離 最大可移動距離=小圖片寬度-遮罩層的寬度 if (maskXs > (that.smallBox.offsetWidth - that.mask.offsetWidth)) { maskXs = that.smallBox.offsetWidth - that.mask.offsetWidth } if (maskYs > (that.smallBox.offsetHeight - that.mask.offsetHeight)) { maskYs = that.smallBox.offsetHeight - that.mask.offsetHeight; } //控制滑鼠移動的位置 that.mask.style.left = maskXs + 'px'; that.mask.style.top = maskYs + 'px'; //根據比例調整大圖的位置 that.bigImg.style.left = -that.bigImg.offsetWidth / that.smallBox.offsetWidth * maskXs + "px"; that.bigImg.style.top = -that.bigImg.offsetHeight / that.smallBox.offsetHeight * maskYs + "px"; } that.box.onmouseover = function () { that.bigBox.style.display = 'block'; that.mask.style.display = 'block'; } that.box.onmouseout = function () { that.bigBox.style.display = 'none'; that.mask.style.display = 'none'; } } var gl = new Glass(); gl.init(); </script> </body> </html>