JavaScript 实现电商网站放大镜效果完整教程

作者：代码拾荒时间：2026-10-30 17:55:42浏览：299

本文详细解析如何使用 JavaScript 实现电商网站常见的图片放大镜效果。通过 HTML 构建商品图与放大区结构，CSS 控制浮动框与可视窗口样式，并利用 onmouseover、onmousemove 和 onmouseout 事件处理鼠标交互逻辑，实现小图移动带动大图同步放大的视觉效果。

JavaScript 实现放大镜效果概述

JavaScript 实现放大镜效果

HTML 结构与 CSS 样式设计

在开发任务中，需要实现电商网站中常见的图片放大查看功能。这种效果通常涉及对图片的局部裁剪与放大显示。起初尝试直接裁剪图片的方法，但发现实现难度较大且效果不佳。经过查阅资料，确定了一种更优的实现思路：利用一个固定的可视区域来展示图片，将超出该区域的部分隐藏，从而通过控制可视区域的内容来实现放大效果。接下来首先展示 HTML 的结构设计。


　

<div id="pic_wrap">
  <div id="float_box"></div>
  <img src="1.jpg">
</div>
<div id="show">
  <img src="1.jpg" id="big_img">
</div>

页面结构主要包含两个外层 div：一个用于展示商品原始图片，另一个用于展示放大后的可视区域。其中，id 为 float_box 的元素代表放大镜的浮动框，第一个 img 标签显示原始商品图片，第二个 img 标签用于显示放大后的商品图片。相关的 CSS 样式代码如下：


img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }

JavaScript 交互逻辑实现

在 HTML 结构和 CSS 样式编写完成后，接下来需要使用 JavaScript 为放大镜添加交互逻辑。

首先处理鼠标移入事件。当鼠标移入图片区域时，需要触发 onmouseover 事件，使放大镜浮动框和放大可视区域显示出来。

其次处理鼠标移动事件。当鼠标未离开图片区域并在图片上移动时，需要监听 onmousemove 事件，实现放大镜浮动框与放大可视区域内图片的同步移动。

最后处理鼠标移出事件。当鼠标完全离开图片区域时，需要触发 onmouseout 事件，使放大镜浮动框和放大可视区域隐藏消失。

在 onmouseover 事件的处理逻辑中，主要任务是让放大镜浮动框和可视窗口同时显示出来。

在 onmousemove 事件的处理逻辑中，核心功能是让放大镜浮动框和可视窗口中的图片根据鼠标位置进行同步移动。

在 onmouseout 事件的处理逻辑中，主要功能是让放大镜浮动框和可视窗口隐藏，恢复初始状态。

以下是完整的实现代码：




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    /*body {
      margin: 0;
      padding: 0;
    }*/
    img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }
  </style>
</head>
<body>
  <div id="pic_wrap">
    <div id="float_box"></div>
    <img src="1.jpg">
  </div>
  <div id="show">
    <img src="1.jpg" id="big_img">
  </div>
<script src="等比放大镜.js"></script>
<script type="text/javascript">  
  var pic_wrap = document.getElementById('pic_wrap'),
    float_box = document.getElementById("float_box"),
    show = document.getElementById('show');
    big_img = document.getElementById("big_img");
  //鼠标移入事件，让放大镜和放大区显示！
  pic_wrap.onmouseover = function() {
    float_box.style.display = "block";
    show.style.display = "block";
  }
  //鼠标不断移动时触发，实时更新放大镜得到的图片
  pic_wrap.onmousemove = function(event) {
    floatMove(float_box, pic_wrap, event);
    showPic();
  }
  //鼠标移出后，放大镜和放大区隐藏
  pic_wrap.onmouseout = function() {
    float_box.style.display = "none";
    show.style.display = "none";
  }  
      //由于offset方法包括边框，在使用的时候很容易出现问题，所以用style来实时获取attr！
  function getStyle(obj, attr) {
    if (window.currentStyle) {
      return parseInt(obj.currentStyle[attr]);
    }
    else {
      return parseInt(getComputedStyle(obj,null)[attr]);
    }
  }
  //运动框架，控制放大镜在原图中的位置！
  function floatMove(argu1, argu2, event) {
    var e = event ||window.event;
    var minLeft = getStyle(argu1, "width");
    var maxLeft = getStyle(argu2, "width") - minLeft/2;
    var minHeight = getStyle(argu1, "height");
    var maxHeight = getStyle(argu2, "height") - minHeight/2;
    console.log(maxLeft);
    console.log(maxLeft - minLeft/2);
    if (e.clientX < minLeft/2) {
      float_box.style.left = "0px";//防止放大镜超出左边框
    }
    else if (e.clientX > maxLeft) {
      float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
    }
    else {
      float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
    }
    if (e.clientY < minHeight/2) {
      float_box.style.top = "0px"; //防止放大镜超出上边框
    }
    else if (e.clientY > maxHeight) {
      float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
    }
    else {
      float_box.style.top = event.clientY - minLeft/2 + "px";
    }
  }
  //用来显示放大镜得到的图片，利用坐标计算！实时更新可视区域
  function showPic() {
    var iCurLeft = getStyle(float_box,"left");
    var iCurTop = getStyle(float_box,"top");
    var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
    var b = getStyle(big_img,"width") - getStyle(show,"width");    
    var moveWidth = -(iCurLeft/a)*b;
    big_img.style.left = moveWidth + "px";
    var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
    var d = getStyle(big_img,"height") - getStyle(show,"height");
    var moveHigth = -(iCurTop/c)*d;
    big_img.style.top = moveHigth + "px";
  }
</script>
</body>
</html>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00