【CSS】 ---- CSS 实现图片随鼠标移动局部放大特效

1. 效果【京东商品放大特效】

2. 实现方法

2.1 JS 实现

1. 创建原图片的盒子，并放入原图片；
2. 创建需要放大区域的遮罩块；
3. 创建显示放大后图片显示的盒子和盒子内放大的图片；
4. 给原图绑定移出移入和鼠标移动的监听事件；
5. 移入和移出控制放大区域和放大后盒子的显示隐藏；
6. 鼠标移动函数里边计算放大区域的位置坐标和，放大后图片的坐标；
7. 这是原来我们常使用的方法，由于最近我在学习CSS的变量和函数，因此简化了这个实现。

2.2 CSS 实现

1. 创建一个原图为背景的盒子；
2. 给盒子绑定鼠标的移动和移出事件；
3. 获取鼠标在盒子的位置，将位置坐标通过CSS变量传入CSS样式中；
4. 同时移动和移出控制放大区域和放大后图片的展示使用透明度控制展示和隐藏。

3. 全局 CSS 变量

1. –content-w 原图片的大小；
2. –mask-w 放大块的大小；
3. –result-w 放大块可移动的最大值；
4. –mult 图片放大倍数；
5. 这样方便封装为组件控制显示原图和放大区域等。

:root {
  --con