Web开发 —— 放大镜效果（HTML、CSS、JavaScript）

原创

已于 2024-07-12 21:50:16 修改 · 4k 阅读

于 2024-07-12 21:49:18 首次发布

该文章已生成可运行项目，

一、需求描述

前端实现放大镜效果；

鼠标移入图片区域，显示遮罩层；
鼠标移出图片区域，隐藏遮罩层；
鼠标移动，遮罩层跟随鼠标移动；
遮罩层不能超出图片所在区域；
遮罩层覆盖的图片区域按照指定比例放大显示；
遮罩层移动，放大图跟随移动；

二、实现效果

初始效果

放大效果

三、完整代码

【test.html】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one-img-box,
        .big-img-box {
            position: relative;
            width: 300px;
            height: 300px;
            box-shadow: 0 0 6px 1px #cacaca;
            border-radius: 10px;
            overflow: hidden;
        }

        .one-img-box {
            display: inline-block;
            top: 60px;
            left: 60px;
            cursor: move;
        }

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

        .big-img-box {
            /* display: inline-block; */
            display: none;
            top: 60px;
            left: 100px;
        }

        .big-img-box>img {
            width: 300%;
            height: 300%;
        }

        .big-img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .mask {
            /* display: inline-block; */
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            opacity: .4;
        }
    </style>
</head>

<body>
    <div class="one-img-box">
        <img src="D:\test\girl.png" alt="">
        <div class="mask"></div>
    </div>
    <div class="big-img-box"><img class="big-img" src="D:\test\girl.png" alt=""></div>
</body>
<script>
    // 1、获取元素
    // 获取原图的盒子
    var oneImgBox = document.querySelector('.one-img-box');
    // 获取遮罩层
    var mask = document.querySelector('.mask');
    // 获取大图

本文章已经生成可运行项目