放大镜的制作

最终样式如图所示：

html片段

<div class="container">
    <img src="images/zoom-image.jpg" width="100%" alt="">
    <div class="move">
        <img src="images/zoom-image.jpg" alt="">
    </div>
    <div class="mini">
        <img src="images/place-16.png" alt="">
    </div>
    <div class="content">
        <h3>这是标题</h3>
        <img src="images/place-16.png" alt="">
        <span>这是描述文字哈哈哈哈哈哈哈哈哈哈</span>
    </div>
</div>

js片段

<script>
    //获取元素的对象
    const container=document.querySelector('.container');
    const move=document.querySelector('.move');
    const bigImg=document.querySelector('.move img');
    const miniImg=document.querySelector('.mini img');
    const miniContent=document.querySelector('.content')

    miniImg.addEventListener("mouseenter",function(){
        miniContent.classList.remove('contentHidden');
        miniContent.style.top= 100+'px';
        miniContent.style.left= 1000+'px';
    })
    miniImg.addEventListener('mouseleave',function(){
        miniContent.classList.add('contentHidden');
    })

    container.addEventListener('mouseenter',function(){
        move.classList.remove('hidden');
        miniImg.classList.add('hidden');//隐藏小图
    })
    container.addEventListener('mouseleave',function(){
        move.classList.add('hidden');
    })

    //绑定container的鼠标移动事件
    container.addEventListener('mousemove',function(e){
        //获取鼠标距离左侧的偏移
        let x = e.clientX;
        //获取container距离左侧的偏移
        let l = container.offsetLeft;
        //计算最终的left值
        let moveLeft = x - l - move.offsetWidth/2;

        //边界检测
        if(moveLeft <=-150)moveLeft=-150;
        //最大值获取
        let maxLeft=container.offsetWidth - move.offsetWidth +150;
        if(moveLeft >= maxLeft)moveLeft=maxLeft;

        //设置样式
        move.style.left=moveLeft+'px';

        //计算大图的left值
        // let bigImgLeft/bigImg.offsetWidth = (moveLeft + move.offsetWidth/2)/container.offsetWidth;
        let bigImgLeft=(moveLeft+move.offsetWidth/2)/container.offsetWidth*bigImg.offsetWidth-move.offsetWidth/2;
        //设置left值
        bigImg.style.left=-bigImgLeft +'px';

        let y = e.clientY;
        //获取container距离左侧的偏移
        let t = container.offsetTop;
        //计算最终的left值
        let moveTop = y - t - move.offsetHeight/2;

        //边界检测
        if(moveTop <=-150)moveTop=-150;
        //最大值获取
        let maxTop=container.offsetHeight - move.offsetHeight+150;
        if(moveTop >= maxTop)moveTop=maxTop;

        //设置样式
        move.style.top=moveTop+'px';

        //计算大图的left值
        // let bigImgLeft/bigImg.offsetHeight = (moveTop + move.offsetHeight/2)/container.offsetHeight;
        let bigImgTop=(moveTop+move.offsetHeight/2)/container.offsetHeight*bigImg.offsetHeight-move.offsetHeight/2;
        //设置left值
        bigImg.style.top=-bigImgTop +'px';
    })
</script>

css片段

<style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container{
            width:1414px;
            min-height: 200px;
            /*border:1px solid #ddd;*/
            position: relative;
        }
        .move{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border:5px solid #000;
            position: absolute;
            left: -9999px;
            top:-9999px;
            overflow: hidden;
        }
        .move img{
            position: absolute;
            left: 0;
            top:0;
        }
        .hidden{
            /*display:none;*/
            opacity: 0;
        }
        .mini img{
            width:45px;
            height: 45px;
            position:absolute;
            left:861px;
            top:318px;
        }
        .content{
            width:400px;
            height:200px;
            border-radius:10px;
            box-shadow: 0px 0px 10px 0px #000;
            background-color:white;
            position: absolute;
            left:-9999px;
            top:-9999px;
        }
        .content h3{
            text-align: center;
            line-height: 50px;
        }
        .content img{
            position: absolute;
            left:10px;
            bottom:30px;
            vertical-align: center;
        }
        .content span{
            display: inline-block;
            float:right;
            line-height: 100px;
            margin-right: 10px;
        }
        .contentHidden{
            display:none;
        }
    </style>