本文实例为大家分享了JS实现电商商品展示放大镜的具体代码，供大家参考，具体内容如下
知识点
1.使用children获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒子通过比例同步
运行效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
border: none;
}
#box {
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
#box > #small_box {
height: 100%;
width: 100%;
border: 1px solid #cccccc;
box-sizing: border-box;
position: relative;
}
#box > #small_box > img {
height: 100%;
width: 100%;
}
#box > #small_box > #mask {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0, .4);
position: absolute;
left: 0;
top: 0;
cursor: move;
/*隐藏*/
display: none;
}
#box > #big_box {
height: 600px;
width: 600px;
border: 1px solid #cccccc;
position: absolute;
left: 360px;
top: 0;
overflow: hidden;
display: none;
}
#box > #big_box > img{
position: absolute;
left: 0;
top: 0;
}
#list {
margin: 20px 0 0 100px;
}
#list ul li {
float: left;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="/UploadFiles/2021-04-02/pic001.jpg">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。