案例：放大镜

IT噜噜

已于 2023-01-13 16:48:02 修改

阅读量67

点赞数

文章标签： css 前端 javascript

于 2023-01-13 16:45:07 首次发布

本文链接：https://blog.csdn.net/Ghlys/article/details/128676267

版权

需求：
1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动；
2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。
实现原理：
1、利用图片的鼠标移入移出事件改变黄色框与右边放大块的display实现黄色框的出现与消失
2、给右边块加放大2.4倍的一样的背景图片
3、利用图片的鼠标移动事件获取鼠标移动距离，将此距离减去黄色框半径再赋予黄色框可以得到黄色框渲染在鼠标周围的效果
再将此距离放大合适倍数赋予右边背景图片的渲染位置实现放大位置随鼠标在原图的位置而改变
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            width: 352px;
            height: 352px;
            position: relative;
        }
        #framework{
            width: 240px;
            height: 240px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            background-color: #fede4f;
            cursor: move;
            display: none;
            pointer-events: none;
        }
        #bigger{
            width: 542px;
            height: 542px;
            position: absolute;
            left:355px;
            top: 0;
            background-image: url(./JS学习/事件img/6e40c9049a90c5b7.jpg);
            background-size: 240%;
            background-repeat: no-repeat;
            display: none;
        }
    
    </style>
</head>
<body>
    <div class="box">
        <img src="./JS学习/事件img/6e40c9049a90c5b7 (1).jpg" id="main">
        <div id="framework"></div>
        <div id="bigger"></div>
    </div>
    <script>
        //鼠标移进，移动元素与放大图片出现
        main.onmouseover=function(){
            framework.style.display="block"
            bigger.style.display="block"
            main.onmousemove=function(evt){
                //让鼠标处于移动元素的中央
                var x=evt.clientX-framework.offsetWidth/2
                var y=evt.clientY-framework.offsetHeight/2
                //确保移动元素在窗口内移动
                if(x<=0) x=0
                if(y<=0) y=0
                if(x>=this.offsetWidth-framework.offsetWidth) x=this.offsetWidth-framework.offsetWidth
                if(y>=this.offsetHeight-framework.offsetHeight) y=this.offsetHeight-framework.offsetHeight
                //改变移动元素的绝对定位实现移动
                framework.style.left=x+"px"
                framework.style.top=y+"px"
                //将移动距离放大得以让放大图片渲染位置也对应
                var biggerX=-x*6.7
                var biggerY=-y*6.7
                bigger.style.backgroundPositionX=biggerX+"px"
                bigger.style.backgroundPositionY=biggerY+"px"
            }
        }
        //鼠标移出，移动元素与放大图片消失
        main.onmouseout=function(){
            framework.style.display="none"
            bigger.style.display="none"
        }
    </script>
</body>
</html>

效果：

QQ录屏20230113162932