放大镜效果

忧郁火龙果

于 2022-07-03 22:45:08 发布

阅读量123

点赞数

分类专栏： JS基础文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/LQlove1/article/details/125590914

版权

JS基础专栏收录该内容

48 篇文章

订阅专栏

一、功能思路

html+css 布局一个原始图片盒子，一个被放大后的盒子
获取所有要用到的元素
经过imgBox，显示mask ，移出隐藏
移动mask
给mask设置移动范围 ----- 计算x，y轴的最大移动范围
放大图片 ----- 计算出移动距离和最大移动范围，跟mask成比例
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 1000px;
            height: 600px;
            margin: 0% auto;
            background-color: aquamarine;
        }
        .imgBox{
            width: 400px;
            height: 400px;
            background-color: aqua;
            position: absolute;
            margin-left: 20px;
        }
        .bigImg{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            position: absolute;
            margin-left: 410px;
            margin-top: -404px;
            display: none;
            overflow: hidden;
        }
        .bigImgChild{
            position: absolute;
            top: 0%;
            left: 0%;
        }
        .mask{
            width: 200px;
            height: 200px;
            background-color: rgb(69, 147, 226);
            opacity: .5;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="imgBox">
            <img src="./imgs/01a3c25b1cfc94a80121bbec79c2d0.jpg" alt="" width="400px" height="400px">
            <div class="mask"></div>
            <div class="bigImg">
                <img class="bigImgChild" src="./imgs/01a3c25b1cfc94a80121bbec79c2d0.jpg" alt="" width="800px" height="800px">
            </div>
        </div>
    </div>
    
    <script>
        window.addEventListener('load',function(e){
// 第一步获取所有要用到的元素
        var imgBox = document.querySelector('.imgBox');
        var mask = document.querySelector('.mask');
        var bigImg = document.querySelector('.bigImg');
// 第二步：经过imgBox，显示mask ，移出隐藏
        imgBox.addEventListener('mouseover' , apearMask);
        function apearMask(){
            mask.style.display = 'block';
            bigImg.style.display = 'block';
        }
// 第三步：经过imgBox，显示mask ，移出隐藏
        imgBox.addEventListener('mouseout' , deleteMask);
        function deleteMask(){
            mask.style.display = 'none';
            bigImg.style.display = 'none';
        }
// 第四步：移动mask
        imgBox.addEventListener('mousemove' , move);
        function move (e){
        // 计算MASK左上角的坐标
        var x = e.pageX - imgBox.offsetLeft ;
        var y = e.pageY - imgBox.offsetTop;
        // 计算Mask中心坐标
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        console.log(maskX);
        console.log(maskY);
//第五步：给mask设置移动范围
        // x轴
        var maskMaxX = imgBox.offsetWidth - mask.offsetWidth;
        if(maskX <= 0 ){
            maskX = 0;
        // imgBox.offsetWidth - mask.offsetWidth 是x轴的移动的最大距离 命名为maskMaxX
        }else if(maskX >= maskMaxX){
            maskX = maskMaxX;
        }
        // y轴
        var maskMaxY = imgBox.offsetHeight - mask.offsetHeight;
        if(maskY <= 0 ){
            maskY = 0;
        // imgBox.offsetHeight - mask.offsetHeight 是y轴的移动的最大距离 maskMaxY
        }else if(maskY >= maskMaxY){
            maskY = maskMaxY;
        }
        mask.style.left = maskX +'px';
        mask.style.top = maskY +'px';
        //第六步：放大图片
        // 移动距离maskX / 最大移动距离maskMaxX  =  大盒子移动距离BigImgMove / 大盒子最大移动距离imgMaxX
        var bigImgChildren = document.querySelector('.bigImgChild');
        // 大盒子最大移动距离maskMaxX
        var imgMaxX = bigImgChildren.offsetWidth - bigImg.offsetWidth  ;
        var imgMaxY = bigImgChildren.offsetHeight - bigImg.offsetHeight  ;
        // 大盒子移动距离BigImgMove
        var BigImgX = maskX / maskMaxX * imgMaxX;
        var BigImgY = maskY / maskMaxY * imgMaxY;
        bigImgChildren.style.left = -BigImgX + 'px';
        bigImgChildren.style.top = -BigImgY + 'px';
        }
        })


    </script>
</body>
</html>