标签：info 使用 name lock 产生 计算 没有 eve 实现
我们在浏览例如淘宝等网站的时候，经常能见到这样的效果
左边是一张完整的图片，当你的鼠标光标放置在图片上的时候，左边图片会在光标的对应位置产生一个半透明的矩形，在右边会产生一个和左边图片等大的局部放大图。
模拟实现放大镜的效果，今天，我就来说说如何使用js实现这样的效果。
<!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>Document</title> <style> .s_box,.b_box{width:400px;height:300px;position: absolute;top:100px;} .s_box{left:50px;} .s_box img{width: 400px;height: 300px;} .s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none} .b_box{left:500px;display: none;overflow: hidden} .b_box img{width: 1200px;height: 900px;position: absolute;left: 0;top:0;} </style> </head> <body> <div class="s_box"> <img src="img/img1.jpg" alt=""> <span></span> </div> <div class="b_box"> <img src="img/img1.jpg" alt=""> </div> </body> <script> // OOP:编程 function Magnifier(){ // 1.选元素 this.sBox = document.querySelector(".s_box"); this.span = document.querySelector(".s_box span"); this.bBox = document.querySelector(".b_box"); this.bImg = document.querySelector(".b_box img"); // 2.绑定事件 this.init() } Magnifier.prototype.init = function(){ var that = this; // 进入 this.sBox.onmouseover = function(){ // 3-1.显示，计算span的宽高 that.show() } // 离开 this.sBox.onmouseout = function(){ // 3-2.隐藏 that.hide() } // 移动 this.sBox.onmousemove = function(eve){ var e = eve || window.event; // 5.span跟随鼠标 that.move(e) } } Magnifier.prototype.show = function(){ // 显示，计算span的宽高 this.span.style.display = "block"; this.bBox.style.display = "block"; this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px"; this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px"; } Magnifier.prototype.hide = function(){ // 隐藏 this.span.style.display = "none"; this.bBox.style.display = "none"; } Magnifier.prototype.move = function(e){ // 计算移动的距离 var l = e.clientX - this.sBox.offsetLeft - this.span.offsetWidth/2; var t = e.clientY - this.sBox.offsetTop - this.span.offsetHeight/2; // 边界限定 if(l<0) l=0; if(t<0) t=0; if(l>this.sBox.offsetWidth - this.span.offsetWidth){ l=this.sBox.offsetWidth - this.span.offsetWidth } if(t>this.sBox.offsetHeight - this.span.offsetHeight){ t=this.sBox.offsetHeight - this.span.offsetHeight } // span跟随鼠标 this.span.style.left = l + "px"; this.span.style.top = t + "px"; // 计算比例 // 当前值 / 总值，得到的就是比例 var x = l / (this.sBox.offsetWidth - this.span.offsetWidth); var y = t / (this.sBox.offsetHeight - this.span.offsetHeight); // 根据比例计算右边大图应该移动的距离 // 比例 * 总值，得到的就是当前应该移动的距离 this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px"; this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px"; } new Magnifier(); </script> </html>
其实这样的效果实现起来是比较简单的，只要我们注意其中比例的配置就基本上没有什么问题了。
标签：info 使用 name lock 产生 计算 没有 eve 实现
原文地址：https://www.cnblogs.com/bsys/p/11524999.html
