仿京东淘宝放大镜效果 JavaScript

VIP文章我该早点睡的

已于 2022-03-19 22:04:18 修改

阅读量192

点赞数 6

文章标签： css3 css html5 javascript

于 2022-03-16 18:50:06 首次发布

本文链接：https://blog.csdn.net/m0_61721166/article/details/123532598

版权

首先我们分析一下整个案例

1.鼠标经过小图片盒子时黄色的遮挡层和大图片盒子显示，离开时隐藏

2.黄色的遮挡层跟随鼠标功能。

3.移动黄色遮挡层，大图片跟随移动功能。

html骨架和css：

<style>
    .preview_img {
        position: relative;
        height: 400px;
        width: 400px;
        border: 1px solid #ccc;
    }
    
    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        background-color: #FEDE4F;
        opacity: .5;
        border: 1px solid #ccc;
        cursor: move;
    }
    
    .big img {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .big {
        display: none;
        position: absolute;
        left: 410px;
        top: 0;
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
</style>

<body> 
        <div class="preview_img">
            <img src

最低0.47元/天解锁文章

我该早点睡的

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
仿京东淘宝放大镜效果 JavaScript

首先我们分析一下整个案例1.鼠标经过小图片盒子时黄色的遮挡层和大图片盒子显示，离开时隐藏2.黄色的遮挡层跟随鼠标功能。3.移动黄色遮挡层，大图片跟随移动功能。html骨架和css：<style> .preview_img { position: relative; height: 400px; width: 400px; border: 1px solid #ccc; } .m
复制链接

扫一扫