javascript 产品放大细节(放大镜)

最新推荐文章于 2020-03-17 15:58:39 发布

weixin_30690833

最新推荐文章于 2020-03-17 15:58:39 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nigori/p/10770523.html

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            position: relative;
            width: 400px;
            height: 400px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: #F5FE4F;
            opacity: .5;
            cursor: move;
            display: none;
        }

        .box2 {
            position: absolute;
            display: none;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }


    </style>
</head>
<body>
<div class="box1">
    <img src="images/big.jpg" alt="" width="100%" height="100%">
    <div class="mask"></div>
    <div class="box2">
        <img src="images/big.jpg" alt="" class="bigImg">
    </div>
</div>

<script>
    var smallBox = document.querySelector('.box1'); // 获取产品盒子
    var mask = document.querySelector('.mask');  // 获取蒙板
    var bigBox = document.querySelector('.box2');  // 获取放大图 的盒子
    var bigImg = document.querySelector('.bigImg');  // 获取 大图
    smallBox.addEventListener('mouseover', function () {   // 注册鼠标进入事件 显示大图盒子 和 蒙板
        mask.style.display = 'block';
        bigBox.style.display = 'block';
    });
    smallBox.addEventListener('mouseout', function () {  // 注册鼠标离开事件  隐藏大图盒子 和 蒙板
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    });

    smallBox.addEventListener('mousemove', function (e) {   // 注册鼠标移动事件
        var x = e.pageX - smallBox.offsetLeft;      // 这里将 鼠标在产品盒子内的 X坐标赋值给x
        var y = e.pageY - smallBox.offsetTop;     // 这里将 鼠标在产品盒子内的 Y坐标赋值给y
        var Max1 = smallBox.offsetWidth - mask.offsetWidth;  // 这里将 蒙板在产品盒子内能位移的最大值 赋值给Max1 (因为是正方形 所有X,Y轴一样）

        var left = x - mask.offsetWidth / 2;    // 这里表示 使鼠标位于蒙板X轴方向的中部 (即 蒙板X移动的距离要向左多移动自身的一半
        if (left <= 0) {    // 判断 是否到达边界
            left = 0;
        } else if (left >= Max1) {
            left = Max1;
        }
        mask.style.left = left + 'px';      // 将移动X坐标值转换为字符串 赋值给蒙板X轴
        var top = y - mask.offsetWidth / 2;  // // 这里表示 使鼠标位于蒙板Y轴方向的中部 (即 蒙板Y移动的距离要向上多移动自身的一半
        if (top <= 0) {     // 判断 是否到达边界
            top = 0;
        } else if (top >= Max1) {
            top = Max1;
        }
        mask.style.top = top + 'px';        // 将移动Y坐标的值转换为字符串 赋值给蒙板Y轴

        var Max2 = bigImg.offsetWidth - bigBox.offsetWidth;   // 这里计算得到 大图的最大位移量

        bigImg.style.left = -(left * Max2 / Max1) + 'px';  // 要是大图与蒙板联动 需要按照最大位移量的比例来达到预想效果 同时使运动方向相反 因此前面加负号

        bigImg.style.top = -(top * Max2 / Max1) + 'px';


    })
    
</script>
</body>
</html>