js原生实现放大镜

最新推荐文章于 2021-11-28 22:42:05 发布

妙团团

最新推荐文章于 2021-11-28 22:42:05 发布

阅读量188

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_52440306/article/details/117375279

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript和CSS创建一个可拖动的放大镜功能，该功能限制在父元素内移动，显示器实时显示放大区域的内容。通过设置元素定位和事件监听，实现了放大镜的移动和等比放大效果。在鼠标离开时，放大镜和显示器隐藏。

摘要由CSDN通过智能技术生成

放大镜的特点
1，放大镜是一个可拖动div，
2，只能在父元素中拖动，不能越界；
3，显示器根据放大镜的移动显示相应区域的内容，
实现的思路
1，脱离文档流的元素才能拖动，子元素要相对父元素设置绝对定位；
2，显示器里面其实已经有一张图片了，这张图片和和需要查看的图片一模一样，不过设置的大小不同，这里设置的比例是6.25倍；放大镜的大小对应显示器的大小，放大镜里的内容和显示器里的内容是一样；等比放大；
3，当移动放大镜的时候，重新设置显示器里面图片的位置，方向是负的，
代码

  <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            padding:100px;
        }
        .box .min{
            position:relative;
            width:200px;
            height:100px;
        }
        .box .min .min-s{
            position:absolute;
            top:0;
            left:0;
            display: none;
            width:80px;
            height:40px;
            background-color:rgba(155,155,255,0.5);
            cursor:pointer;
        }
        .box .min .min-img{
            width: 100%;
            height:100%;
        }
        .box .max{
            position:relative;
            width:500px;
            height:250px;
            display: none;
            overflow:hidden;
        }
        .box .max .max-img{
            position:absolute;
            width: 1250px;
            height: 625px;
            
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='min'>
            <img src='img/美女23.jpg' class='min-img'>
            <div class='min-s' id='glass'></div>
        </div>
        <div class=max>
            <img class='max-img' src='img/美女23.jpg'>
        </div>

    </div>
</body>
<script>
    let  glass=document.getElementById('glass');
    let up=document.getElementsByClassName('min')[0];
    let max=document.getElementsByClassName('max')[0];
    let show=document.getElementsByClassName('max-img')[0];
    up.onmouseover=function(e){
        max.style.display='block';
        glass.style.display='block';
        let x=e.clientX;
        let y=e.clientY;
        let width=glass.offsetWidth;
        let height=glass.offsetHeight;
        glass.onmousemove=function(evt){
            var evt=evt||window.event;
            //当前鼠标相对于浏览器窗口的位置
            //要减去元素的起始位置到浏览器窗口的位置
            let newsX=evt.clientX-up.offsetLeft-width/2;
            let newsY=evt.clientY-up.offsetTop-height/2;
            if(newsX<0) newsX=0;
            if(newsY<0) newsY=0;
            if(newsX>up.offsetWidth-width) newsX=up.offsetWidth-this.offsetWidth;
            if(newsY>up.offsetHeight-height) newsY=up.offsetHeight-this.offsetHeight;
            this.style.top=`${newsY}px`;
            this.style.left=`${newsX}px`;
            show.style.top=`${-newsY*6.25}px`;
            show.style.left=`${-newsX*6.25}px`;

            x='',y='';
            return false;
        }
    }
    up.onmouseout=function(){
        max.style.display='none';
        glass.onmousemove=null;
        glass.style.display='none';
        
    }