JS放大镜案例

最新推荐文章于 2024-01-29 23:55:28 发布

CoderLix

最新推荐文章于 2024-01-29 23:55:28 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签：放大镜

本文链接：https://blog.csdn.net/ZLX_508/article/details/89367141

版权

如今我们在在各大电商网站购物时都有过这样的体验：当看上某件心意的商品时，我们可以点击进入商品主界面。在主界面里面有一个专门用来展示商品的大方框，大方框下面是一些小的方框，这些小的方框里面的图片分别从不同的角度来展示此商品。当我们鼠标点击选择下面的小图片时，大方框里面就会显示你点击选择的这张图片。接着，当你把鼠标放到大图片上时，大图片上会出现一个半透明的小方块，与此同时，大图片旁边也会出现一个方框，方框里面就是显示你半透明小方块区域内图片。当透明小方块在大图片上移动时，旁边的方框会随着鼠标的移动来等比放大方块中的图片，并展示到旁边的方框中，这样我们就能很细致的看到商品的细节部分。其实，这种功能的实现就是运用了放大镜的原理。

放大镜原理图：

放大镜代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>放大镜案例</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }

        .zoom-box {
            width: 452px;
            position: relative;
        }

        .small-box {
            position: relative;
            border: 1px solid #ccc;
        }

        .small-box img {
            width: 100%;
            height: 100%;
        }

        .small-box .square {
            position: absolute;
            left: 0;
            top: 0;
            background: yellow;
            opacity: 0.5;
            /*opacity：透明度*/
            /*display: none;*/
        }

        .small-box .mask {
            width: 100%;
            height: 100%;
            position: absolute;  /*绝对定位*/

最低0.47元/天解锁文章

CoderLix

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
JS放大镜案例

如今我们在在各大电商网站购物时都有过这样的体验：当看上某件心意的商品时，我们可以点击进入商品主界面。在主界面里面有一个专门用来展示商品的大方框，大方框下面是一些小的方框，这些小的方框里面的图片分别从不同的角度来展示此商品。当我们鼠标点击选择下面的小图片时，大方框里面就会显示你点击选择的这张图片。接着，当你把鼠标放到大图片上时，大图片上会出现一个半透明的小方块，与此同时，大图片旁边也会出现一个方框，...
复制链接

扫一扫