高清放大镜（移到图片上可显示局部放大）

最新推荐文章于 2023-05-31 11:22:04 发布

气球大海

最新推荐文章于 2023-05-31 11:22:04 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_44239035/article/details/89448808

版权

两张图片，一大一小，遮挡层不在鼠标边上主要是margin的问题，减去或加上对应的margin值。给横纵坐标设置最大最小值以防遮挡层移动到小图外面。
遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
根据比例算出大图的横向纵向移动距离
最后赋值

外部导入文件内容主要是

/**
 * 获取指定标签对象
 * @param id 标签的id属性值
 * @returns {Element}根据id属性值返回指定标签对象
 */
function my$(id) {
    return document.getElementById(id);
}

完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>哈哈</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/><!--小图-->
        <div class="mask"></div><!--遮挡层-->
    </div>
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>

    //获取需要的元素
    var box = my$("box");
    //获取小图的div
    var small = box.children[0];
    //遮挡层
    var mask = small.children[1];
    //获取大图的div
    var big = box.children[1];
    //获取大图
    var bigImg = big.children[0];

    //鼠标进入显示遮挡层和大图的div
    box.function(){
        mask.style.display="block";
        big.style.display="block";
    };
    //鼠标离开隐藏遮挡层和大图的div
    box.function(){
        mask.style.display="none";
        big.style.display="none";
    };
    //鼠标的移动事件---鼠标是在小层上移动
    small.function(e){
        //鼠标此时的可视区域的横坐标和纵坐标
        //主要是设置鼠标在遮挡层的中间显示
        var x= e.clientX-mask.offsetWidth/2;
        var y= e.clientY-mask.offsetHeight/2;
        //主要是margin的100px的问题
        x=x-100;
        y=y-100;
        //横坐标的最小值
        x=x<0?0:x;
        //纵坐标的最小值
        y = y < 0 ? 0 : y;
        //横坐标的最大值
        x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
        //纵坐标的最大值
        y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
        //为遮挡层的left和top赋值
        mask.style.left=x+"px";
        mask.style.top=y+"px";

        //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
        //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离

        //大图的横向的最大移动距离
        var maxX = bigImg.offsetWidth - big.offsetWidth;

        //大图的纵向的最大移动距离
        //var maxY = bigImg.offsetHeight - big.offsetHeight;

        //大图的横向移动的坐标
        var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
        //大图的纵向移动的坐标
        var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);

        //设置图片移动
        bigImg.style.marginLeft = -bigImgMoveX + "px";
        bigImg.style.marginTop = -bigImgMoveY + "px";

    };

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

图片效果显示
在这里插入图片描述