HTML+JavaScript实现放大镜效果

最新推荐文章于 2023-03-31 14:32:21 发布

b^b烧麦

最新推荐文章于 2023-03-31 14:32:21 发布

阅读量310

点赞数

分类专栏： HTML 文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_53841203/article/details/128289819

版权

HTML 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

HTML+JavaScript实现放大镜效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>放大镜效果</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
          .box{
            position:relative;
            width:350px;
            height:350px;
            border: 1px solid red;
          }
          .mask{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: rgb(190, 111, 15);
            opacity: .5;
            border: 1px solid red;
            cursor: move;
          }
          .big{
                display: none;
                position: absolute;
                left: 400px;
                top:0;

                width: 500px;
                height: 500px;
                background-color:blueviolet;
                overflow: hidden;
                border: 1px solid red;
            }

            .big > img{
                position: absolute;
                left:0;
                right: 0;
            }
            
        </style>
        <script >
        window.onload=function(){
    
    var box = document.querySelector('.box');
    var mask = document.querySelector('.mask');
    var big =document.querySelector('.big');
    var bigImg = document.querySelector('.bigImg');

    box.onmouseover = function(){
        mask.style.display='block';
        big.style.display='block';

    }
    box.onmouseout = function(){
        mask.style.display = 'none';
        big.style.display = 'none';

    }

    box.onmousemove = function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskX = x-mask.offsetWidth / 2;
        var maskY = y-mask.offsetHeight / 2;
        var maskMax = box.offsetWidth - mask.offsetWidth;
        if(maskX <= 0){
            maskX = 0;

        }else if(maskX >= maskMax){
            maskX = maskMax;
        }
        if(maskY <= 0){
            maskY = 0;

        }else if(maskY >= maskMax){
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY +'px';

        // 大图片的移动距离 = 遮罩层移动距离*大图片最大移动距离、遮罩层最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX +'px';
        bigImg.style.top = -bigY +'px';
    }
}
        </script>
    </head>
    
    <body>
        <div class="box">
        <img src="small.jpg" alt="">
         
       
        <div class="mask"></div>
        <div class="big">
        <img src="big.jpg" alt="" class="bigImg">
        </div> 
    </div>
    </body>
    
</html>