js点击图片放大预览(js中点击图标变大)
相信小伙伴们都逛过淘宝,天猫,京东等电商购物平台网站,里面都有一个图片放大镜的效果案例。这样的
![js点击图片放大预览(js中点击图标变大)(1)](http://img.studyofnet.com/uploads/0430/b1530a84985.jpg)
下面就按照思路带大家实现这个效果案例。
首先我们要知道案例的所有步骤,然后我们再用代码把每个步骤一步一步实现。这样就完成了整个案例。思路清晰了,代码就好写。下面我们就把思路一步一步理出来,便于小伙伴理解和观看,首先图片有两张,一张左边的预览图和右边的大的高清图,下面来说说思路。
- 初始的时候,蓝色蒙版和右边放大图片区域是隐藏状态。
- 鼠标移入左边图片区域,蓝色蒙版和放大区域图片显示。
- 鼠标移出左边图片区域,蓝色蒙版和放大区域图片隐藏。
- 鼠标在左边图片区域移动时,蓝色蒙版跟着鼠标移动。
- 右边放大区域图片跟着蓝色蒙版的移动(也就是改变右边图片的position位置)。
下面开始页面布局以及css样式。
HTML结构:
![js点击图片放大预览(js中点击图标变大)(2)](http://img.studyofnet.com/uploads/0430/b1530a84987.jpg)
CSS样式:
![js点击图片放大预览(js中点击图标变大)(3)](http://img.studyofnet.com/uploads/0430/b1530a84990.jpg)
js部分:
![js点击图片放大预览(js中点击图标变大)(4)](http://img.studyofnet.com/uploads/0431/b1531a84992.jpg)
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com