js点击图片放大预览 js中点击图标变大

相信小伙伴们都逛过淘宝，天猫，京东等电商购物平台网站，里面都有一个图片放大镜的效果案例。这样的

下面就按照思路带大家实现这个效果案例。

首先我们要知道案例的所有步骤，然后我们再用代码把每个步骤一步一步实现。这样就完成了整个案例。思路清晰了，代码就好写。下面我们就把思路一步一步理出来，便于小伙伴理解和观看，首先图片有两张，一张左边的预览图和右边的大的高清图，下面来说说思路。

1. 初始的时候，蓝色蒙版和右边放大图片区域是隐藏状态。
2. 鼠标移入左边图片区域，蓝色蒙版和放大区域图片显示。
3. 鼠标移出左边图片区域，蓝色蒙版和放大区域图片隐藏。
4. 鼠标在左边图片区域移动时，蓝色蒙版跟着鼠标移动。
5. 右边放大区域图片跟着蓝色蒙版的移动（也就是改变右边图片的position位置）。

下面开始页面布局以及css样式。

HTML结构：

CSS样式：

js部分：