版权声明：转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/86755993
在一些主流的购物网站上，我们经常能看到一些带有放大镜效果的图片框，看似神奇，指哪哪大，其实实现的原理很简单
主要原理：实现放大镜的核心是需要有三套大小不同，形状相同的图片，通过坐标的改变来实现图片的区域切换；
代码：
<!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>放大镜</title>
<link rel="stylesheet" href="./css/index.css">
<!-- 引入css样式 -->
</head>
<body>
<!-- 整个案例 -->
<div class="box">
<!-- 大图 -->
<div class="big_box_img"></div>
<!-- 中图 -->
<div class="banner" data-src="img/_800x1026.jpg">
<img class="middleImage" src="./img/cc_350x449.jpg" alt="">
<div class="ceng"></div>
</div>
<!-- 小图 -->
<div class="small_box">
<div class="small_box_img" data-big="img/cc_800x1026.jpg" data-src="./img/cc_350x449.jpg">
<img src="./img/cc_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/c_800x1026.jpg" data-src="./img/.jpg">
<img src="./img/_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/800x1026.jpg" data-src="./img/cc_350x449.jpg">
<img src="./img/cc_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/cc_800x1026.jpg" data-src="./img/cc_350x449.jpg">
<img src="./img/!cc_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/cc_800x1026.jpg" data-big="" data-src="./img/cc_350x449.jpg">
<img src="./img/cc_50x64.jpg" alt="">
</div>
</div>
</div>
<script>
//放大镜共由三套图组成，大中小图，基本方式是在小图上绑定中图和大图的事件，当触发小图的事件时将
//中图的路径传给中图img 将大图的路径传给中图的div 触发中图的事件时将中图div的路径传给大图并使
//隐藏的大图显示出来，利用坐标计算出 ceng 和鼠标相应的位置。
big_box_img = document.getElementsByClassName('big_box_img')[0];//找到了大图的img
var box = document.getElementsByClassName('box')[0];//找到了整个大的box
var mousein_img = document.getElementsByClassName('small_box_img');//找到了小图的img
var oldboder_object = mousein_img[0];//定义了上次执行初值小图的变量
//相当于使它表示当前变红的小图的边框，在执行新的操作时，它就成为了上一次的执行对象，方便操作
var move_img = document.getElementsByClassName('middleImage')[0];//找到了中图的img
var banner = document.getElementsByClassName('banner')[0];//找到中图的div
var ceng1 = document.getElementsByClassName('ceng')[0];//找到放大镜鼠标块的div
mousein_img[0].style.borderColor = '#e60000';//让小图的左边第一个边框默认变红
// console.log(banner);之前用于测试
//实现小图的悬停使得对应的边框变色且之前的边框变为透明色（也就是没有颜色）
//大致思想：通过for循环，使每个小图的img都绑定上鼠标进入到小图事件（onmouseseenter）
//用oldboder_object记录当前事件，在执行下一事件时，它就变为了之前的事件！！！！！！
//将当前的边框变为了红色，然后将之前的（oldboder_object）变为透明
for (var i = 0; i < mousein_img.length; i++) {//将所有的小图绑定事件
mousein_img[i].onmouseenter = function () {
oldboder_object.style.borderColor = 'transparent';
this.style.borderColor = '#e60000';
oldboder_object = this;//this 表示当前执行
move_img.src = this.getAttribute("data-src");//data-src表示中图的src（自定义）
banner.setAttribute('data-src', this.getAttribute('data-big'));//data-big表示大图的src（自定义）
}
}
//实现中图鼠标进入时候的事件绑定
//
banner.onmouseenter = function () {
console.log('sada');//用于测试是否找到元素
big_box_img.style.display = "block";//将隐藏的大图的div显示出来
ceng1.style.display = 'block';//将隐藏的 ceng 的div显示出来
var big_img_src = banner.getAttribute('data-src');//定义一个变量将中图div中的src传入
big_box_img.style.backgroundImage = 'url(' + big_img_src + ')';//利用字符串拼接将big_img_src
//中的src 传入big_box_img的背景图片中
}
banner.onmousemove = function (e) {
this.style.cursor = 'move';//改变鼠标在中图中的默认形状
var x = e.pageX || e.clientX;//定义鼠标在中图中的X坐标
var y = e.pageY || e.clientY;//定义鼠标在中图中的Y坐标
var left = (x - box.offsetLeft - 118.125) <= 0 ? 0 : (x - box.offsetLeft - 118.125) >= 113.75 ? 113.75 : (x - this.offsetLeft - 118.125);//offsetLeft左边界偏移的像素值（锁定ceng的位置，当鼠标位置大于限定的距离时，位置保持不变）
var top = ((y - box.offsetTop - 118.115)) <= 0 ? 0 : (y - box.offsetTop - 118.115) >= 212.69 ? 212.69 : (y - this.offsetTop - 118.115);//offsetTop上边界偏移的像素值
ceng1.style.left = left + 'px';
ceng1.style.top = top + 'px';//配合将鼠标的坐标放在ceng的中间且限定ceng的位置
big_box_img.style.backgroundPosition=-left * 2.28+"px "+-(top * 2.28)+"px";//限制了大图比例
}
banner.onmouseleave = function () {
ceng1.style.display = 'none';
big_box_img.style.display = 'none';//当鼠标离开中图时，将大图中的所有none掉
}
</script>
</body>
</html>这个案例是一个月前写的，现在翻出来，我的天呐~~~
我觉得已经写得有点详细了，真没想到我之前那么努力那么认真（容许我自恋一秒，哈哈啊哈~^_^~）