原生态生成放大镜实例

最新推荐文章于 2022-06-01 05:30:00 发布

C-先生

最新推荐文章于 2022-06-01 05:30:00 发布

阅读量124

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44100514/article/details/103288272

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

感谢小白教我学习放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*整个div中只放置小显示区域即可，大显示区域隐藏，这样直接对zoom设置属性就行了*/
        .zoom{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            margin-top: 100px;
            /*margin-top: 1000px;  测试有滚动条情况下反应*/
            position: relative;
            border: solid 1px #000;
        }
        .big_area{
            /*大显示区域宽高可直接改变*/
            width: 200px;
            height: 200px;
            position: absolute;
            left: -10000px;
            top: -1px;
            border: solid 1px #000;
            overflow: hidden;
        }
        .big_area img{
            position: absolute;
            left: 0;
            top: 0;
        }
        /*遮罩层*/
        .mask{
            position: absolute;
            left: -10000px;
            top: 0;
            width: 100px;
            height: 100px;
            background: #000;
            opacity:0.65;
            filter:alpha(opacity=65);
        }
    </style>
</head>
<body>
<div class="zoom">
    <div class="small_area">
        <img src="qunzi.jpg" width="200" height="200" />
        <span class="mask"></span>
    </div>
    <div class="big_area">
        <img src="qunzi.jpg" width="620" height="620">
    </div>
</div>

<script>

    // 获取相应节点元素
    var zoom = document.querySelector('.zoom');
    var simg = document.querySelector('.small_area img');
    var bimg = document.querySelector('.big_area img');
    var big = document.querySelector('.big_area');
    var small = document.querySelector('.small_area');
    var mask = document.querySelector('.mask');

    // 设置遮罩层宽高  小图宽 除以 大图宽 乘以 大显示区域边框
    mask.style.width = (simg.offsetWidth/bimg.offsetWidth)*big.clientWidth+"px";
    mask.style.height = (simg.offsetHeight/bimg.offsetHeight)*big.clientHeight+"px";

    // 定义遮罩层最大边距，也就是最大移动距离
    var maxW = simg.clientWidth - mask.offsetWidth;
    var maxH = simg.clientHeight - mask.offsetHeight;

    // 鼠标移入小显示区域发生事件：1.遮罩层显示 2.大显示区域显示
    small.onmouseenter=function(){
        mask.style.left = 0;
        big.style.left = 210+"px";
    }
    // 鼠标移入小显示区域发生事件：1.遮罩层消失 2.大显示区域消失
    small.onmouseleave=function(){
        mask.style.left = -10000+"px";
        big.style.left = -10000+"px";
    }
    // 鼠标在小显示区域移动
    small.onmousemove=function(e){
        // 解决兼容问题
        e = e || window.event;
        // 定义两个变量 让鼠标位置一直处于遮罩层位置中间
        var nLeft = e.pageX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2;
        var nTop = e.pageY-zoom.offsetTop-zoom.clientTop-mask.offsetHeight/2;

        // 设置遮罩层永远显示在小显示区域内部 也就是判断nLeft、nTop值
        nLeft = Math.min(maxW,Math.max(0,nLeft));
        nTop = Math.min(maxH,Math.max(0,nTop));

        // 遮罩层位置
        mask.style.left = nLeft+"px";
        mask.style.top = nTop+"px";

        // 设置大图片移动位置 跟随遮罩层百分比移动（语法带入）
        bimg.style.left = -(bimg.offsetWidth-big.clientWidth)*(nLeft/(simg.clientWidth-mask.offsetWidth))+"px";
        bimg.style.top = -(bimg.offsetHeight-big.clientHeight)*(nTop/(simg.clientHeight-mask.offsetHeight))+"px";


    }
</script>

</body>
</html>

在这里插入图片描述

C-先生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生态生成放大镜实例

感谢我小白教我学习放大镜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*整个div中只放置小显示区域即可，大显示区域隐藏，这样直...
复制链接

扫一扫