放大镜的实现

实现图片的放大与改变放大之后的样式

Html部分

    <div id = "image"></div> //这里引入一个div标签，后面以div标签开始

CSS部分

    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100px;
        }                            //设置基本body样式

        #image {
            width: 300px;
            height: 300px;
            background-color: #000;
            background-image: url(../../ASNA/003A.jpg);
            background-size: 300px 300px;
            background-repeat: no-repeat;           //直接进入页面的静态样式
        }

        #image[zoomed]{
            background-size: 720px 720px;
            border: 3px yellow solid;
            background-position: calc(var(--x)*100%) calc(var(--y)*100%);
        }                                          //预设置的变化样式

        

    </style>

JS部分

        document.querySelector('#image').addEventListener('mouseenter',enterHandler)
       //定义一个鼠标移入的函数
        document.querySelector('#image').addEventListener('mousemove',moveHandler)
       //定义鼠标在图片内部移动的函数       
        document.querySelector('#image').addEventListener('mouseleave',leaveHandler)
       //定义鼠标移出图片的函数

        function enterHandler(e) {
            e.target.setAttribute('zoomed',1)
        }    //鼠标进入图片，添加zoomed的class名

        function moveHandler(e) {
            let rect = e.target.getBoundingClientRect()
            let x = e.offsetX / rect.width
            let y = e.offsetY / rect.height
            e.target.style.setProperty('--x',x)
            e.target.style.setProperty('--y',y)
        }    //鼠标在图片中移动，显示位置跟随鼠标移动

        function leaveHandler(e){
            e.target.removeAttribute('zoomed')
        }    //鼠标溢出图片

20230113_012212

放大后