js原生淘宝京东宝贝放大镜效果

不念不忘少年蓝@ 2022-01-07 20:17 264阅读 0赞

## js实现商城放大镜效果 ##

效果：

>  *  鼠标放上去会有半透明遮罩、右边会有大图片局部图。
>  *  鼠标移动时右边的大图片也会局部移动。

`技术点`：

`Event`  
Event 是一个事件对象，当一个事件发生后，和当前事件发生相关的详细信息被临时存储到一个指定的地方，也就是event对象，以方便我们在需要的时候调用。

`事件捕获`，`定位`

\`难点\`\`：计算。

\*\**接下来是demo分享：*

*css部分：*

* { margin: 0; padding: 0; } /* img { vertical-align: top; } */ .box { width: 350px; height: 350px; position: relative; border: 1px solid black; margin: 150px 0 0 300px; } .big { width: 450px; height: 450px; position: absolute; border: 1px solid black; left: 400px; top: 0; display: none; overflow: hidden; } .small { position: relative; } .mask { width: 100px; height: 100px; background-color: rgba(255, 255, 0, 0.4); position: absolute; left: 0; top: 0; cursor: move; display: none; } .big img { position: absolute; left: 0; top: 0; }

*html结构部分：*

//第一步获取节点
        let box = document.getElementById('oBox');
        let small = box.children[0]; //获取盒子的第一个子节点samll
        let big = box.children[1]; //获取盒子的第二个子节点big
        let mask = small.children[1]; //获取小盒子里的遮罩
        let bigImg = big.children[0]; //获取大盒子里的图片
    
    
        //鼠标进入small 遮罩(mask)大盒子(big)display:block
        small.onmouseover = function() {
            mask.style.display = 'block';
            big.style.display = 'block';
    
        };
    
        //鼠标离开small 遮罩(mask)大盒子(big)display:none
        small.onmouseout = function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        };
    
        let x = 0;
        let y = 0;
    
    
        small.onmousemove = function(even) {
            var even = even || window.event;
    
            // 获取鼠标在small里的坐标
            let x = even.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
            let y = even.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
    
    
            // 限制住鼠标的坐标导致遮罩的位置越界
            if (x < 0) {
                x = 0;
            } else if (x > small.offsetWidth - mask.offsetWidth) {
                x = small.offsetWidth - mask.offsetWidth;
            }
    
            if (y < 0) {
                y = 0;
            } else if (y > small.offsetHeight - mask.offsetHeight) {
                y = small.offsetHeight - mask.offsetHeight;
            }
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';
            //注意大图片的方向
            bigImg.style.top = -y * big.offsetHeight / small.offsetHeight + 'px';
            bigImg.style.left = -x * big.offsetWidth / small.offsetWidth + 'px';
        };

转载于:https://www.cnblogs.com/wangqingjiu/p/10932917.html