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

js点击图片放大预览_js中点击图标变大 相信小伙伴们都逛过淘宝，天猫，京东等电商购物平台网站，里面都有一个图片放大镜的效果案例。

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

首先我们要知道案例的所有步骤，然后我们再用代码把每个步骤一步一步实现。

这样就完成了整个案例。

思路清晰了，代码就好写。

下面我们就把思路一步一步理出来，便于小伙伴理解和观看，首先图片有两张，一张左边的预览图和右边的大的高清图，下面来说说思路。

初始的时候，蓝色蒙版和右边放大图片区域是隐藏状态。

鼠标移入左边图片区域，蓝色蒙版和放大区域图片显示。

鼠标移出左边图片区域，蓝色蒙版和放大区域图片隐藏。

鼠标在左边图片区域移动时，蓝色蒙版跟着鼠标移动。

右边放大区域图片跟着蓝色蒙版的移动（也就是改变右边图片的position位置）。

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

HTML结构：CSS样式：js部分：