超详细原生js实现一个放大镜效果

原生js实现一个放大镜

学习js之初，写过js放大镜，但是当时模模糊糊，似懂非懂，最近重温js内容，决定重写了一下这个放大镜效果，希望可以让初学者对js-DOM的练习更好上手

一、放大镜效果

二、实现步骤

1. 首先分析放大镜结构

• 左边图片:img—原图片
• 左边图片里面的类似于放大镜的遮罩层:glass—用于选择需要放大的部分
• 右边放大的图片:bigImg —用于展示放大效果

html代码如下：

 <div class="box"><div class="glassWrapper"><img src="./assets/green.jpg" class="img"/><div class="glass" id="glass"></div></div><div class="bigWrapper"><img src="./assets/green.jpg" class="bigImg"/></div></div> 

2. 整体样式—css部分

整体居中： 左右两张图片居中垂直使用flex布局，网上很多，这里不多说布局问题

右边放大效果的关键样式： 底部有一张大图片，有一个固定的框展示放大的部分，超过这个展示款的部分就遮住，从而出现一种被放大的效果，使用：overflow: hidden;

css代码：

.glassTitle {color