封装放大镜

1、放大镜插件的参数

参数	参数表示的意义
selector	(必须写) 指定容器
url	(必须写) 图片地址

2、放大镜插件js代码

function initscaleGlass(selector, url) {
    //获取目标容器
    var oWrap = document.querySelector(selector);
    //定义变量保存创建的oMask
    var oMask = null;
    //定义变量保存大图对象
    var oBig = null;
    //定义变量保存放大镜容器
    var oScale = null;
    //构建基本界面
    initView();
    //绑定事件
    //1、鼠标移入
    oWrap.addEventListener('mouseover', function () {
        oMask.style.display = 'block';  //mask出现
        oScale.style.display = 'block';  //oScale出现
    })
    //2、鼠标移出
    oWrap.addEventListener('mouseout', function () {
        oMask.style.display = 'none';  //mask消失
        oScale.style.display = 'none';  //oScale消失
    })
    //3、移动1修改oMask
    oWrap.addEventListener('mousemove', function (e) {
        //兼容
        e = e || window.event;
        //获取鼠标在oWrap中的位置坐标
        oWrap._x = e.pageX - getEl2Dom(oWrap, "Left") - oWrap.clientLeft;
        oWrap._y = e.pageY - getEl2Dom(oWrap, "Top") - oWrap.clientTop;
        //计算oMask的定位值
        oMask._x = oWrap._x - oMask.offsetWidth / 2;
        oMask._y = oWrap._y - oMask.offsetHeight / 2;
        //边界处理
        var W = oWrap.clientWidth - oMask.offsetWidth;
        var H = oWrap.clientHeight - oMask.offsetHeight;
        oMask._x = oMask._x < 0 ? 0 : oMask._x;
        oMask._x = oMask._x > W ? W : oMask._x;
        oMask._y = oMask._y < 0 ? 0 : oMask._y;
        oMask._y = oMask._y > H ? H : oMask._y;
        //样式设置
        oMask.style.left = oMask._x + 'px';
        oMask.style.top = oMask._y + 'px';
    })

    //4、移动2修改oBig的位置
    oWrap.addEventListener('mousemove', function (e) {
        //兼容
        e = e || window.event;
        //oBig定位 /  oBig高度 ==  oMask定位 / oWrap.内容区域高度
        oBig.style.top = -(oBig.offsetHeight * oMask._y / oWrap.clientHeight) + 'px';
        oBig.style.left = -(oBig.offsetWidth * oMask._x / oWrap.clientWidth) + 'px';
    })


    //1、根据传入的数据构建基本页面
    function initView() {
        oWrap.style.position = 'relative';
        //1-1、创建oMask
        oMask = document.createElement('div');
        //1-2、设置样式
        var oW = oWrap.offsetWidth * 0.3;  //定义变量保存oMask的宽度
        oMask.style.width = oW + 'px';
        oMask.style.height = oW + 'px';
        oMask.style.position = 'absolute';
        oMask.style.opacity = '0.5';
        oMask.style.background = 'yellow';
        oMask.style.display = 'none';
        //2-1.创建img
        var oImg = new Image();
        oImg.src = url;
        //2-2、设置样式
        oImg.style.width = oWrap.clientWidth + 'px';
        oImg.style.height = oWrap.clientHeight + 'px';
        oImg.style.display = 'block';
        oWrap.appendChild(oImg);
        //3-1、创建放大图结构容器+图片  克隆
        oScale = oWrap.cloneNode(true);
        //将oScale放入oWrap
        oWrap.appendChild(oScale);  //放入DOM中

        //3-2、设置样式
        oScale.style.height = oWrap.clientWidth + 'px';
        oScale.style.position = 'absolute';
        oScale.style.left = oWrap.offsetWidth + 'px';
        oScale.style.top = '0px';
        oScale.style.index = 100;
        oScale.style.overflow = 'hidden';
        //克隆出来的，把margin去掉
        oScale.style.margin = '0px';

        //4-1、设置oScale中的图片样式
        oBig = oScale.firstElementChild; //获取大图

        //x2 : oWrap.clientWidth
        //bg2 : oBig.style,width
        //x1 : 0.3 * oWrap.clientWidth
        //bg1 : oWrap.clientWidth

        /*
            x1 / bg1 = x2 / bg2  等比例缩放公式
            bg2 = x2 / (x1 / bg1);
        */
        oBig.style.width = oScale.clientWidth / (oW / oWrap.clientWidth) + 'px';
        oBig.style.height = oScale.clientHeight / (oW / oWrap.clientHeight) + 'px';
        oBig.style.position = 'relative';


        //5、将oScale隐藏
        oScale.style.display = 'none';

        //6、将创建的mask也放入oWrap中
        oWrap.appendChild(oMask);


    }
    //2、工具方法获取盒子到文档边界之间的距离()
    function getEl2Dom(el, fx) {
        if (el == null) return 0;
        //获取当前盒子的左侧定位
        var offsetLeft = el["offset" + fx];
        //获取当前盒子的定位父级
        var parent = el.offsetParent;
        //获取父级的边框宽度
        var clientLeft = parent ? parent["client" + fx] : 0;
        return offsetLeft + clientLeft + getEl2Dom(el.offsetParent, fx)
    }

    //给一个返回值
    return function (url) {
        //获取oWrap下imgs
        var imgs = oWrap.querySelectorAll('img');
        //遍历修改src
        imgs.forEach(function (img) {
            img.src = url;
        })
    }
}

3、放大镜插件使用示例

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        .wrap {
            width: 400px;
            height: 400px;
            display: inline-block;
        }

        .li {
            width: 500px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .li img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="wrap"> </div>
       
        <div class="li">
            <!-- 这里放入自己的图片即可 -->
            <img class="img1" src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/6.jpg" alt="">
        </div>
   

</body>
<script src="./JS/scaleGlass.js"></script>
<script>

    //获取照片
    var imgs = document.querySelectorAll('.li img');
    var src = document.querySelector('.img1').src;
    var imgset = initscaleGlass('.wrap', src);
    //遍历绑定
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].addEventListener('click', function (e) {
            imgset(this.src)
        })
    }

</script>

</html>