放大镜效果

@秋野

已于 2024-03-20 19:11:34 修改

阅读量195

点赞数 3

分类专栏：前端入门效果文章标签： javascript 前端 css html5

于 2024-03-20 16:22:25 首次发布

本文链接：https://blog.csdn.net/BGMcat/article/details/136879703

版权

前端入门效果专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

放大镜效果

摘要

利用css和js来实现图片放大效果

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>

    <div class="middle">
        <div class="mask"></div>
    </div>
    <div class="smailContainer">
        <div class="smail"><img src="./images/img/1074928343.jpeg" alt="你干嘛"></div>
        <div class="smail"><img src="./images/img/947922382.jpeg" alt="你干嘛"></div>
        <div class="smail"><img src="./images/img/930354195.jpeg" alt="你干嘛"></div>
        <div class="smail"><img src="./images/img/676723802.jpeg" alt="你干嘛"></div>
    </div>
    <div class="big">

    </div>

    <script>
        const middleBox = document.querySelector('.middle')
        const smailBox = document.querySelector('.smailContainer')
        const bigBox = document.querySelector('.big')

        //滑动选择图片显示
        middleBox.style.backgroundImage = `url(${smailBox.querySelector('img').src})`
        smailBox.addEventListener('mouseover', function (e) {
            if (e.target.nodeName === 'IMG') {
                middleBox.style.backgroundImage = `url(${e.target.src})`;
            }
        })

        // mouseenter，mouseleave无冒泡
        //显示mask和大图
        let timeId = 0
        middleBox.addEventListener('mouseenter', function () {

            clearTimeout(timeId)

            const mask = this.querySelector('.mask')
            mask.style.display = 'inline-block'

            bigBox.style.backgroundImage = middleBox.style.backgroundImage
            bigBox.style.display = 'inline-block'

            this.addEventListener('mousemove', function (e) {
                // console.log(e.offsetX);

                const x = e.pageX - this.getBoundingClientRect().left
                const y = e.pageY - this.getBoundingClientRect().top
                if (x >= 0 && x <= 200 && y >= 0 && y <= 200) {
                    let mx = 0;
                    let my = 0;

                    if (x <= 25) {
                        mx = 0;  
                    } else if (x <= 175) {  
                        mx = x - 25   //平滑移动，mask的一半
                    } else {
                        mx = 150
                    }

                    if (y <= 25) {
                        my = 0;
                    } else if (y <= 175) {
                        my = y - 25
                    } else {
                        my = 150
                    }

                    mask.style.marginLeft = mx + 'px';
                    mask.style.marginTop = my + 'px';

                    bigBox.style.backgroundPositionX = -4* mx + 'px'  //4为大图和mask的倍数
                    bigBox.style.backgroundPositionY = -4* my + 'px'
                }

            })

        })
        middleBox.addEventListener('mouseleave', function () {
            this.querySelector('.mask').style.display = 'none'
            timeId = setTimeout(function () {
                bigBox.style.display = 'none'
            }, 200)
        })


        //大图显示
        bigBox.addEventListener('mouseenter', function () {
            this.style.display = 'inline-block'
            clearTimeout(timeId)
        })
        bigBox.addEventListener('mouseleave', function () {
            timeId = setTimeout(function () {
                bigBox.style.display = 'none'
            }, 200)
        })

    </script>
</body>


</html>

CSS



.middle{
    width: 200px;
    height: 200px;
    background: green;
    display: inline-block;
    background-size: cover;
}
.big{
    width: 200px;
    height: 200px;
    margin-left: 5px;
    background: palegoldenrod;
    display: inline-block ;
    z-index: 99;
    position: absolute;
    display: none;
    /* background-size: cover; */
}

.smailContainer {
    height: 200px;
    display: inline-block;
    position: absolute;
    margin-left: 5px;
}

.smail {
    width: 40px;
    height: 40px;
    background: red;
    margin-top: 5px;
}

.smail:hover {
    cursor: pointer;
    border: 2px solid #000;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mask{
    width: 50px;
    height: 50px;
    background: #0773d7;
    opacity: 0.3;
    display: none;
    z-index: 99;
}