實現放大鏡效果
<style> *{ margin: 0; padding: 0; } .wrap{ overflow: hidden; position: relative; padding: 50px; } .left{ float: left; width: 350px; height: 350px; position: relative; border: 1px solid green; cursor: move; } .left img{ width: 350px; height: 350px; display: block; } .mask{ width: 175px; height: 175px; opacity: 0.5; position: absolute; left: 0; top: 0; display: none; } .right{ float: left; width: 814px; height: 462px; margin-left: 20px; } .right img{ width: 814px; height: 462px; display: block; } .showbox{ width: 400px; height: 400px; position: absolute; left: 410px; top: 50px; overflow: hidden; border: 1px solid red; display: none; } .showbox img{ width: 800px; height: 800px; position: absolute; } </style> </head> <body> <div class="wrap"> <div class="left"> <img class="minimg" src="max.jpg" alt=""> <div class="mask"></div> </div> <div class="right"> <img src="msg.png" alt=""> </div> <div class="showbox"> <img class="maximg" src="max.jpg" alt=""> </div> </div> <script> // 1.鼠標移入：原圖容器 -> 蒙板層顯示、放大的圖顯示 // 2.鼠標移出：原圖容器 -> 蒙板層隱藏、放大的圖隱藏 // 3.鼠標移動：原圖容器 -> 蒙板跟着移動、放大圖跟着移動（移動方向相反 -負數） (function () { function Magnify(domObj) { this.left = domObj.left; this.mask = domObj.mask; this.showBox = domObj.showBox; this.maxImg = domObj.maxImg; } Magnify.prototype = { addEvent: function () { this.left.onmouseover = function () { this.showHide(this.mask,'block'); this.showHide(this.showBox,'block'); }.bind(this); this.left.onmouseout = function () { this.showHide(this.mask,'none'); this.showHide(this.showBox,'none'); }.bind(this); this.left.onmousemove = function (ev) {//移動 定位 var e = ev || window.event; this.move(e); }.bind(this); }, showHide: function (dom,val) { dom.style.display = val; }, move: function (e) { // 計算蒙板的定位值 var l = e.clientX - this.mask.clientWidth/2 - this.left.offsetLeft; var t = e.clientY - this.mask.clientHeight/2 - this.left.offsetTop; if (l <= 0){//左邊臨界值 l = 0; } if (l >= (this.left.clientWidth - this.mask.clientWidth)) {//右邊臨界值 l = this.left.clientWidth - this.mask.clientWidth; } if (t <= 0) {//上邊界 t = 0; } if (t >= (this.left.clientHeight - this.mask.clientHeight)) {//下邊界 t = this.move.clientHeight - this.mask.clientHeight; } // 蒙板定位 this.mask.style.left = l + 'px'; this.mask.style.top = t + 'px'; // 運動比例 var scaleX = l / (this.left.clientWidth - this.mask.clientWidth); var scaleY = t / (this.left.clientHeight - this.mask.clientHeight); // 大圖定位 this.maxImg.style.left = -(this.maxImg.clientWidth - this.showBox.clientWidth) * scaleX + 'px'; this.maxImg.style.top = -(this.maxImg.clientHeight - this.showBox.clientHeight) * scaleY + 'px'; }, init: function () { this.addEvent(); return this; } } function factory(domObj) { return new Magnify(domObj).init(); } window.magnify = factory; })(); magnify({ left: document.querySelector('.left'), mask: document.querySelector('.mask'), showBox: document.querySelector('.showbox'), maxImg: document.querySelector('.maximg') }); </script>