js 点击图片放大 js 放大图片

文章插图

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

下面就按照思路带大家实现这个效果案例。
首先我们要知道案例的所有步骤，然后我们再用代码把每个步骤一步一步实现。这样就完成了整个案例。思路清晰了，代码就好写。下面我们就把思路一步一步理出来，便于小伙伴理解和观看，首先图片有两张，一张左边的预览图和右边的大的高清图，下面来说说思路。
初始的时候，蓝色蒙版和右边放大图片区域是隐藏状态。鼠标移入左边图片区域，蓝色蒙版和放大区域图片显示。鼠标移出左边图片区域，蓝色蒙版和放大区域图片隐藏。鼠标在左边图片区域移动时，蓝色蒙版跟着鼠标移动。右边放大区域图片跟着蓝色蒙版的移动（也就是改变右边图片的position位置）。
下面开始页面布局以及css样式。
HTML结构：

CSS样式：

【js 点击图片放大 js 放大图片】js部分：