jQuery 如何实现放大器效果

最新推荐文章于 2021-08-04 13:24:43 发布

原创

最新推荐文章于 2021-08-04 13:24:43 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html #css

这篇博客介绍了如何利用jQuery创建一个商品图片放大镜效果。当鼠标悬停在图片上时，会出现显示选中区域的缩放视图和高清大图区域。内容包括HTML布局、CSS隐藏设置以及JavaScript代码实现。

我又来了

今天的内容时如何实现放大器效果

我们在看网购的时候，每个商品都有详细的介绍图片

当我们把鼠标放上去的时候，会出现两个区域

一个区域是选中图片的具体位置

另一个区域是高清大图

需要注意的是，图片尽量为正方形
例
示例图片

==原理==其实很简单：原图上的遮罩层默认隐藏，将原图放大，并默认隐藏，原图默认显示，当鼠标进入原图时，将大图显示在一个区域内，并显示遮罩层。

查看html代码
 查看CSS代码
 查看JavaSript代码

首先，写入html代码

<div class="box1">
        <img src="img/02.jpg" alt="">
        <div class="shadow"></div>
    </div>

    <div class="box2">
        <img id="img" src="img/02.jpg" alt

最低0.47元/天解锁文章