原生JS实现放大镜功能

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            vertical-align: middle;
        }
        .box {
            margin: 100px;
            width: 350px;
            height: 467px;
            padding: 1px;
            border: 1px solid yellow;
            position: relative;
        }
        .box .small {
            width: 350px;
            position: relative;
        }
        .box .small .mask {
            width: 160px;
            height: 160px;
            background-color: yellow;
            -webkit-filter: opacity(40%);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .box .big {
            position: absolute;
            left: 360px;
            top: 0;
            width: 400px;
            height: 400px;
            overflow: hidden;
            display: none;
            border: 1px solid red;
        }
        .box .big img {
            left: 0;
            top: 0;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="small" id="small">
        <img src="images/small.jpg" alt="" >
        <div id="mask" class="mask"></div>
    </div>
    <div id="big" class="big">
        <img src="images/big.jpg" alt="" />
    </div>
</div>
<script src="js/moon.js"></script>
<script>
    //获取box
    var box=my$('box');
    //获取小图框，大图框
    var small=box.children[0];
    var big=box.children[1];
    //获取大图
    var bigImg=big.children[0];
    //获取mask
    var mask=small.children[1];
    //鼠标放入box，mask和big显示，移开消失
    box.onmouseover=function(e){
        mask.style.display='block';
        big.style.display='block';
        this.style.cursor='move';
    };
    box.onmouseout=function(){
        mask.style.display='none';
        big.style.display='none';
    };
    small.onmousemove=function(e){
        //获取鼠标的可是区域坐标
        var x=e.clientX-mask.offsetWidth/2;
        var y=e.clientY-mask.offsetHeight/2;
        x=x-100;
        y=y-100;
        // console.log(x+'---'+y);
        //设置鼠标不能移出small相框
        x=x>0?x:0;
        x=x<small.offsetWidth-mask.offsetWidth?x:small.offsetWidth-mask.offsetWidth;
        y=y>0?y:0;
        y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
        //设置mask跟随鼠标移动
        mask.style.marginLeft=x+'px';
        mask.style.marginTop=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>

其中引入的moon.js代码如下：

//通过id获取元素
function my$(id){
    return document.getElementById(id);
}

整个项目的压缩包百度网盘地址为：https://pan.baidu.com/s/1sJS2-k-j8GubC6nINsfnLA
提取码为：gihn

原生JS实现放大镜功能

猜你喜欢