当前位置:Gxlcms > html代码 > 如何用原生javascript实现放大镜效果_html/css_WEB-ITnose

如何用原生javascript实现放大镜效果_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:30人阅读

随着科技的发展,网购已成为大家生活中必不可少的一个模式,各种电商平台也如雨后春笋般涌现出来,今天我们就来用原生js来实现类似淘宝选购物品时的放大镜效果.

这里要用到大小两张图片,我选取的是800x800和350x350大小的两张图片

图片来源于网络

首先写出html和css样式

html部分

          

原理是创建min和max两个区域,将小图https://www.gxlcms.com/img/1.jpg和创建的放大镜divfd放到min中,将大图https://www.gxlcms.com/img/2.jpg放到max中

css样式部分