黑马js京东放大镜js代码

最新推荐文章于 2023-07-22 14:26:27 发布

VIP文章不会前端的前端猿

最新推荐文章于 2023-07-22 14:26:27 发布

阅读量388

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_69172270/article/details/125096143

版权

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