放大镜效果

2024-03-21 08:06:05
开发
38

在这里插入图片描述

放大镜效果

摘要

利用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;
}

原文地址:https://blog.csdn.net/BGMcat/article/details/136879703 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1770602742402912256.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

放大镜效果

摘要

HTML

CSS

相关推荐

最近更新

热门阅读