黑马js京东放大镜js代码

window.addEventListener('load',function () {
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    //给盒子添加鼠标经过事件 经过显示模态框和放大框
    preview_img.addEventListener('mouseover' ,function () {
        mask.style.display = 'block'
        big.style.display = 'block'
    })
    //添加鼠标离开事件 经过隐藏模态框和放大框
    preview_img.addEventListener('mouseout' ,function () {
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    //添加鼠标移动事件
    preview_img.addEventListener('mousemove' ,function (e) {
        //鼠标在盒子里的距离 = 鼠标到body的距离 - 盒子到body的距离
        var x = e.pageX - this.offsetLeft
        var y = e.pageY - this.offsetTop

        //减去模态框自身一半的大小，让鼠标能在模态框中心
        var maskX =x - mask.offsetWidth / 2