原生JavaScript实现京东风格图片放大镜特效
作者：小括号时间：2026-10-25 14:20:49浏览：551
本文详细介绍如何使用原生JavaScript实现类似京东网站的图片放大镜功能。通过HTML构建左右分栏布局，利用CSS定位遮罩层与大图容器，并结合JavaScript监听鼠标移动、边界判断及比例换算公式，实现小图区域与大图区域的同步联动展示，提供完整的代码实现参考。
京东放大镜效果实现概述
本文分享了一段使用JavaScript实现类似京东网站图片放大镜功能的完整代码示例，供开发者参考学习。
最终实现的效果如下图所示：
页面布局与CSS定位
①页面布局：整体结构采用一个大容器，内部划分为上下两部分，其中下半部分进一步分为左右两个区域。左侧区域包含一张图片（如b3.png）和一个遮罩层（cover）；右侧区域放置一张800x800像素的大图（如big.jpg）。
注意：左侧容器内的遮罩层（cover）需设置为绝对定位，右侧容器内的大图片也需设置为绝对定位。
核心功能逻辑实现
②功能实现：主要包含以下三个核心功能模块：
1. 显示与隐藏控制：当鼠标移入（mouseover）左侧盒子时，黄色遮罩层及右侧大图容器显示；当鼠标移出（mouseout）左侧盒子时，两者隐藏。
2. 遮罩层跟随鼠标移动（mousemove）：计算鼠标在左侧盒子内的坐标，公式为：鼠标页面坐标减去左侧盒子页面坐标。由于遮罩层中心需对准鼠标，最终坐标需再减去遮罩层宽高的一半。需注意边界条件：遮罩层在X轴方向的移动距离不能小于0，且不能超过左侧盒子宽度减去遮罩层宽度的值。
3. 大图联动移动：移动黄色遮罩层时，右侧大图需同步移动。大图移动距离的计算公式如下：
遮挡层的移动距离已在前述步骤中计算得出。遮罩层的最大移动距离也已明确。接下来计算大图的移动范围，大图的最大移动距离等于图片实际尺寸减去右侧容器的尺寸。
完整代码示例
以下是完整的代码实现：
HTML结构代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东放大镜效果</title>
<script src="../js/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
/* 外面大盒子 */
.container {
box-sizing: border-box;
width: 1200px;
height: 500px;
/* background-color: pink; */
margin: 200px auto;
}
.container .topbox {
width: 100%;
height: 60px;
/* background-color: violet; */
border-bottom: 2px solid #bc2815;
}
.container .topbox ul {
margin-left: 10px;
}
.container .topbox ul li {
float: left;
font-size: 22px;
color: #4e535b;
padding: 15px 20px;
}
.container .topbox ul li:hover {
color: white;
background-color: #bc2815;
}
.container .topbox ul li:first-child {
color: white;
background-color: #bc2815;
}
.container .bottombox .leftbox {
float: left;
height: 400px;
width: 400px;
/* background-color: violet; */
margin-top: 10px;
}
.container .bottombox .leftbox ul {
overflow: hidden;
margin-left: 10px;
}
.container .bottombox .leftbox ul li {
float: left;
font-size: 14px;
color: #4e535b;
}
.container .bottombox .leftbox .leftphone {
position: relative;
overflow: hidden;
width: 400px;
height: 400px;
/* background-color: pink; */
margin-top: 5px;
margin-left: 10px;
border: 1px solid #c8cbc8;
}
.leftbox .leftphone img {
width: 100%;
height: 100%;
}
.container .bottombox .leftbox .leftphone .cover {
position: absolute;
display: none;
top: 0;
left: 0;
width: 220px;
height: 220px;
background-color: #ffeba2;
opacity: 0.5;
border: 1px solid #ccc;
cursor: move;
}
.container .bottombox .rightbox {
float: left;
margin-top: 10px;
width: 420px;
height: 420px;
margin-left: 20px;
/* background-color: violet; */
}
.container .bottombox .rightbox {
position: relative;
display: none;
border: 1px solid #ccc;
overflow: hidden;
}
.container .bottombox .rightbox img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="topbox">
<ul>
<li>全部商品分类</li>
<li>服装城</li>
<li>美妆馆</li>
<li>传智超市</li>
<li>全球购</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li>有趣</li>
</ul>
</div>
<div class="bottombox">
<div class="leftbox">
<div class="leftnav">
<ul>
<li>手机、数码、通讯 ></li>
<li>手机 ></li>
<li>Apple苹果 ></li>
<li>iphone 6S Plus系统 </li>
</ul>
<div class="leftphone">
<img src="../b3.png" alt="">
<div class="cover"></div>
</div>
</div>
</div>
<div class="rightbox">
<img src="../big.jpg" alt="" class="big">
</div>
</div>
</div>
</body>
</html>外部JavaScript文件代码：
window.addEventListener('load', function() {
// 获取元素
var cover = this.document.querySelector('.cover');
var leftphone = this.document.querySelector('.leftphone');
var rightbox = this.document.querySelector('.rightbox');
var big = this.document.querySelector('.big');
// 鼠标移动到左边的手机上的时候遮罩层和右边的手机显示出来
leftphone.addEventListener('mouseover', function() {
cover.style.display = 'block'
rightbox.style.display = 'block'
})
// 鼠标移离开到左边的手机上的时候遮罩层和右边的手机隐藏
leftphone.addEventListener('mouseout', function() {
cover.style.display = 'none'
rightbox.style.display = 'none'
})
leftphone.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// x的移动距离
var totalx = x - cover.offsetWidth / 2;
var totaly = y - cover.offsetHeight / 2
if (totalx < 0) {
totalx = 0;
} else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) {
totalx = leftphone.offsetWidth - cover.offsetWidth;
}
if (totaly < 0) {
totaly = 0;
} else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) {
totaly = leftphone.offsetHeight - cover.offsetHeight;
}
cover.style.left = totalx + 'px';
cover.style.top = totaly + 'px';
// imgmaxx是图片最大x移动距离
var imgmaxx = rightbox.offsetWidth - big.offsetWidth;
var imgmaxy = rightbox.offsetHeight - big.offsetHeight;
var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth)
var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight)
big.style.left = imgmovex + 'px';
big.style.top = imgmovey + 'px';
})
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
作者最新文章
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18