本文共 2225 字，大约阅读时间需要 7 分钟。

放大镜功能实现

放大镜是一种常见的网页交互效果，通过鼠标移动可以实现元素的放大和跟随效果。以下是放大镜功能的实现步骤和代码解析：

功能模块

实现步骤

代码解析

function Magnifier() {    // 选择元素    this.sBox = document.querySelector(".small_box");    this.span = document.querySelector(".small_box span");    this.bBox = document.querySelector(".big_box");    this.bImg = document.querySelector(".big_box img");        // 绑定事件    this.addEvent();}Magnifier.prototype.addEvent = function() {    var that = this;        // 进入事件    this.sBox.addEventListener("mouseover", function() {        that.show();    });        // 离开事件    this.sBox.addEventListener("mouseout", function() {        that.hide();    });        // 移动事件    this.sBox.addEventListener("mousemove", function(e) {        var e = e || window.event;        that.move(e);    });}Magnifier.prototype.show = function() {    this.span.style.display = "block";    this.bBox.style.display = "block";        // 计算比例    this.sBoxW = this.sBox.offsetWidth;    this.sBoxH = this.sBox.offsetHeight;    this.spanW = this.span.offsetWidth;    this.spanH = this.span.offsetHeight;    this.bBoxW = this.bBox.offsetWidth;    this.bBoxH = this.bBox.offsetHeight;    this.bImgW = this.bImg.offsetWidth;    this.bImgH = this.bImg.offsetHeight;}Magnifier.prototype.hide = function() {    this.span.style.display = "none";    this.bBox.style.display = "none";}Magnifier.prototype.move = function(e) {    // 计算移动坐标    var l = e.clientX - this.sBoxL - this.spanW / 2;    var t = e.clientY - this.sBoxT - this.spanH / 2;        // 边界限定    if (l < 0) l = 0;    if (t < 0) t = 0;    if (l > this.sBoxW - this.spanW) l = this.sBoxW - this.spanW;    if (t > this.sBoxH - this.spanH) t = this.sBoxH - this.spanH;        // 更新位置    this.span.style.left = l + "px";    this.span.style.top = t + "px";        // 计算比例并设置大图位置    var x = l / (this.sBoxW - this.spanW);    var y = t / (this.sBoxH - this.spanH);        this.bImg.style.left = x * -Math.abs(this.bImgW - this.bBoxW) + "px";    this.bImg.style.top = y * -Math.abs(this.bImgH - this.bBoxH) + "px";}

代码结构

通过以上代码实现的放大镜功能可以满足用户的交互需求，同时支持鼠标移动和比例放大效果。