鍍金池/ 問答/HTML5  HTML/ 手寫了個放大鏡，但是比例對不上，沒找到哪里的問題。。。

手寫了個放大鏡，但是比例對不上，沒找到哪里的問題。。。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            border: 2px solid #eee;
            width: 400px;
            height: 400px;
            box-shadow: 5px 10px 10px 3px #ccc;
            position: relative;
            float: left;
        }
        .box {
            width: 180px;
            height: 180px;
            background: yellow;
            opacity: 0.4;
            /*display: none;*/
            position: absolute;
        }
        .scale {
            width: 450px;
            height: 450px;
            border: 2px solid #b3b3b3;
            position: relative;
            display: inline-block;
            overflow: hidden;
        }
        .big-image{
            /*overflow: hidden;*/
            position: absolute;
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="container">
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4265027237,2654660306&fm=27&gp=0.jpg" width="100%" height="100%">
    <div class="box"></div>
</div>
<div class="scale">
    <img class="big-image" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4265027237,2654660306&fm=27&gp=0.jpg" alt="" width="100%" height="100%">
</div>
<script>
    let container = document.querySelector('.container');
    let box = document.querySelector('.box');
    let scale = document.querySelector('.scale');

    let bigImage = document.querySelector('.big-image'); // 大圖
    let percent = scale.offsetHeight / box.offsetHeight; // 大圖：小圖比例
    bigImage.width = bigImage.offsetWidth * percent;
    bigImage.height = bigImage.offsetHeight * percent;

    container.onmouseover = () => {
        box.style.display = 'block';

        container.onmousemove = e => {
            let x = e.clientX;
            let y = e.clientY;


            box.style.left = x  - box.offsetWidth / 2 + 'px';
            box.style.top = y  - box.offsetHeight / 2 + 'px';

            if(box.offsetLeft <= 0) {
                box.style.left = 0;
            }
            if(box.offsetTop <= 0) {
                box.style.top = 0;
            }

            if (container.offsetWidth - box.offsetLeft < box.offsetWidth) {
                box.style.left = container.offsetWidth - box.offsetWidth + 'px';
            }
            if (container.offsetHeight - box.offsetTop < box.offsetHeight) {
                box.style.top = container.offsetHeight - box.offsetHeight + 'px';
            }

            bigImage.style.left = -box.offsetLeft * percent + 'px';
            bigImage.style.top = -box.offsetTop * percent + 'px';
;        }

    };
    container.onmouseout = () => {
        box.style.display = 'none';
    };
</script>
</body>
</html>

源碼貼上可以直接運行，大神幫忙看看，我眼花了真是~~

回答
編輯回答
拮據(jù)
找到問題所在了，大圖的寬應(yīng)該等于小圖寬乘以 放大圖的預(yù)覽圖除以放大鏡的寬， 高同理，上面的代碼自己改一部分就可以

*上面的

bigImage.width = bigImage.offsetWidth * percent;
bigImage.height = bigImage.offsetHeight * percent;

改為

bigImage.width = container.offsetWidth * percent;
bigImage.height = container.offsetHeight * percent;

即可，昨天寫到太晚，迷迷糊糊地沒發(fā)現(xiàn)

2018年8月11日 22:17
編輯回答
薄荷綠

你需要把小框的中心對應(yīng)到大框的中心

2017年4月20日 04:01