js放大镜（图片放大）

js图片放大

1.结构部分

<div class="box" id="box">
        <div class="small">
            //要放大的图片
            <img src="image/higher.jpeg" width="350" alt="" />
            //放大镜
            <div class="mask"></div>
        </div>
        //显示图片
        <div class="big">
            <img src="image/higher.jpeg" alt="" />
        </div>
</div>

2.js部分

<script>
        let box = $('box');
        let smallBox = box.children[0];
        let bigBox = box.children[1];
        let smallImage = smallBox.children[0];
        let mask = smallBox.children[1];
        let bigImage = bigBox.children[0];

        box.onmouseenter = function () {
            mask.style.display = 'block';
            bigBox.style.display = 'block';
        }

        box.onmouseleave = function () {
            mask.style.display = 'none';
            bigBox.style.display = 'none';
        }

        box.onmousemove = function (e) {
            // 兼容
            e = e || window.event;

            // 获取鼠标移动时mask距离box的距离
            let maskX = e.pageX - box.offsetLeft;
            let maskY = e.pageY - box.offsetTop;
            // console.log(box.offsetLeft,smallBox.offsetLeft);
            // 不能使用smallBox的offset距离，smallBox为相对定位，smallBox相对于box的offsetLeft与offsetTop始终为0

            // 向左、上分别移动一半遮罩层的宽高，以实现鼠标在遮罩层中间的效果
            maskX = maskX - mask.offsetWidth / 2;
            maskY = maskY - mask.offsetHeight / 2;

            // console.log(box.offsetWidth,box.offsetHeight);
            let maskMaxLeft = box.offsetWidth - mask.offsetWidth; //获取mask的最大left距离
            let maskMaxTop = box.offsetHeight - mask.offsetHeight; //获取mask的最大top距离

            // 保证mask的left距离始终在0-maskMaxLeft之间，即保证x轴上mask始终在box中
            maskX = maskX < 0 ? 0 : maskX;
            maskX = maskX > maskMaxLeft ? maskMaxLeft : maskX;

            // 保证mask的top距离始终在0-maskMaxTop之间，即保证y轴上mask始终在box中
            maskY = maskY < 0 ? 0 : maskY;
            maskY = maskY > maskMaxTop ? maskMaxTop : maskY;

            // 赋值
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';


            // mask在box中移动的距离与bigImage在bigBox中显示的位置成正比例
            // maskX/maskMaxLeft=bigImageX/bigImageMaxLeft
            // maskY/maskMaxTop=bigImageY/bigImageMaxTop

            let bigImageMaxLeft = bigImage.offsetWidth - bigBox.offsetWidth; //获取bigImage的最大left距离
            let bigImageMaxTop = bigImage.offsetHeight - bigBox.offsetHeight; //获取bigImage的最大top距离

            // 由公式可得
            let bigImageX = maskX / maskMaxLeft * bigImageMaxLeft;
            let bigImageY = maskY / maskMaxTop * bigImageMaxTop;

            // bigImage为相对定位，因此bigImage的top和left应为负值才可实现效果
            bigImage.style.left = -bigImageX + 'px';
            bigImage.style.top = -bigImageY + 'px';
        }
    </script>

3.封装的方法

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

// 获取min-max之间的数字
function getRandomNumber(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min - 1) + min)
}

// 获取随机颜色
function getRandomColor() {
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    return `rgb(${r},${g},${b})`
}

// 获取当前日期时间
function CurrentDatetime() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var time = `${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')}`
    // var time = `${hour.toString().padStart(2,'0')}:${minute.toString().padStart(2,'0')}:${second.toString().padStart(2,'0')}`;
    // var time = `${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')} ${hour.toString().padStart(2,'0')}:${minute.toString().padStart(2,'0')}:${second.toString().padStart(2,'0')}`;
    return time;
}

// 获取距离时间
function getBetweenTime(dateTime) {
    // 指定日期和时间
    var endTime = new Date(dateTime);
    // 当前系统时间
    var nowTime = new Date();
    var t = endTime.getTime() - nowTime.getTime();
    var d = Math.floor(t / 1000 / 60 / 60 / 24);
    var h = Math.floor(t / 1000 / 60 / 60 % 24);
    var m = Math.floor(t / 1000 / 60 % 60);
    var s = Math.floor(t / 1000 % 60);
    // var html = d + " 天" + h + " 时" + m + " 分" + s + " 秒";
    var html = [d.toString().padStart(2,'0'),h.toString().padStart(2,'0'),m.toString().padStart(2,'0'),s.toString().padStart(2,'0')];
    return html
}

// 获取页面滚动条距离左侧和顶部的距离
function getScroll(){
    var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    return {
        scrollLeft:scrollLeft,
        scrollTop:scrollTop
    }
}