前端实现放大镜（规律公式）

作者: ForeverYoung_06 | 来源:发表于2021-03-11 09:46 被阅读0次

前端实现放大镜（规律公式）
前端小白之实现放大镜效果
171. Excel Sheet Column Number
举例分析迭代及递归的复杂度（scheme代码实现）
2018-12-01
BN层合并原理及实现
javascript实现放大镜插件【含进阶】
规律
数学竟然如此简单！11张图轻松搞定初中数学，成就孩子的学霸梦！
数据库总结（二）

    // 放大镜公式
    // 已知原展示图片宽为W,高为H
    // 放大倍数为N,故放大后宽为N*W,高为N*H
    // 放大镜为正方形,宽高为G
    // 左边界&&上边界 -N*X+(G/2)=0
    // 右边界 -N*X+(G/2)=-(N*W-G)
    // 下边界 -N*X+(G/2)=-(N*H-G)
    // 480*270   放大到  960*540 2倍
    // 左边界和上边界 -2x+100=0 x=50
    // 右边界 -2x+100=-(960-200) x=430
    // 下边界 -2x+100=-(540-200)  x=220

 bigImage.onmousemove = function (e) {
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        var x = e.clientX - glass.offsetLeft;
        var y = e.clientY - glass.offsetTop + st;

        if (x < 50) {
            x = 50;
        }
        if (x > 430) {
            x = 430
        }
        if (y < 50) {
            y = 50
        }
        if (y > 220) {
            y = 220;
        }

        glassView.children[0].style.left = -x * 2 + 100 + "px";
        glassView.children[0].style.top = -y * 2 + 100 + "px";

        mark.style.left = x - 50 + "px";
        mark.style.top = y - 50 + "px";

    }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .glass {
            width: 480px;
            position: relative;
        }

        .mark {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.3);
            position: absolute;
            top: 0;
            left: 0;
            display: none
        }

        .bigImage,
        .bigImage img {
            width: 480px;
            height: 270px;
        }

        .smImage {
            width: 480px;
            margin-top: 20px;
        }

        .smImage img {
            width: 140px;
            margin: 0 8px;
            opacity: 0.6;
        }

        .glassView {
            width: 200px;
            height: 200px;
            position: absolute;
            right: -200px;
            top: 0;
            overflow: hidden;
            display: none;
        }

        .glassView img {
            width: 960px;
            height: 540px;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>

<body>
    <div class="glass">
        <!-- 放大镜图片 -->
        <div class="glassView">
            <img src="images/08.jpg" alt="">
        </div>

        <!-- 大图 -->
        <div class="bigImage">
            <img src="images/08.jpg" alt="">
            <!-- 放大镜标记 -->
            <div class="mark"></div>
        </div>
        <!-- 缩略图 -->
        <div class="smImage">
            <img src="images/08.jpg" alt="">
            <img src="images/09.jpg" alt="">
            <img src="images/10.jpg" alt="">
        </div>
    </div>
</body>
<script>
    var glass = document.getElementsByClassName("glass")[0];
    var glassView = glass.getElementsByClassName("glassView")[0];
    var bigImage = glass.getElementsByClassName("bigImage")[0];
    var smImageView = glass.getElementsByClassName("smImage")[0];
    var smImage = glass.getElementsByClassName("smImage")[0].children;
    var mark = glass.getElementsByClassName("mark")[0];
    //记录当前显示图片索引
    var x = 0;
    smImage[x].style.opacity = "1";

    //给每个小图自定义索引编号
    for (var i = 0; i < smImage.length; i++) {
        smImage[i].index = i;
    }

    //点击缩略图切换大图(事件委托)
    smImageView.onclick = function (e) {

        if (e.target.nodeName === "IMG") {

            smImage[x].style.opacity = "0.6";
            e.target.style.opacity = "1";
            x = e.target.index;

            bigImage.children[0].src = e.target.src;
            glassView.children[0].src = e.target.src;
        }

    }

    //鼠标移动放大局部
    bigImage.onmousemove = function (e) {
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        var x = e.clientX - glass.offsetLeft;
        var y = e.clientY - glass.offsetTop + st;

        // 放大镜公式
        // 已知原展示图片宽为W,高为H
        // 放大倍数为N,故放大后宽为N*W,高为N*H
        // 放大镜为正方形,宽高为G
        // 左边界&&上边界 -N*X+(G/2)=0
        // 右边界 -N*X+(G/2)=-(N*W-G)
        // 下边界 -N*X+(G/2)=-(N*H-G)
        // 480*270   放大到  960*540 2倍
        // 左边界和上边界 -2x+100=0 x=50
        // 右边界 -2x+100=-(960-200) x=430
        // 下边界 -2x+100=-(540-200)  x=220

        if (x < 50) {
            x = 50;
        }
        if (x > 430) {
            x = 430
        }
        if (y < 50) {
            y = 50
        }
        if (y > 220) {
            y = 220;
        }

        glassView.children[0].style.left = -x * 2 + 100 + "px";
        glassView.children[0].style.top = -y * 2 + 100 + "px";

        mark.style.left = x - 50 + "px";
        mark.style.top = y - 50 + "px";

    }

    //鼠标移入显示glassView
    bigImage.onmouseover = function () {
        glassView.style.display = "block";
        mark.style.display = "block";
    }
    //鼠标移出隐藏glassView
    bigImage.onmouseout = function () {
        glassView.style.display = "none"
        mark.style.display = "none"
    }
</script>

</html>