lovecoding
/
class


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            box-sizing: border-box;
        }
        #container {
            position: relative;
        }
        #small {
            width: 400px;
            height: 400px;
            position: relative;
        }
        #big {
            position: absolute;
            top: 0;
            left: 400px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            display: none;
        }
        #drag {
            width: 200px;
            height: 200px;
            background:rgba(0,0,0,.3);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #bigImg {
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="small">
            <img src="./images/6.jpg" alt="">
            <div id="drag"></div>
        </div>
        <div id="big">
            <img src="./images/7.jpg" id="bigImg" alt="">
        </div>
    </div>
    <script>
        var drag = document.getElementById("drag");
        var small = document.getElementById("small");
        var bigImg = document.getElementById("bigImg");
        var big = document.getElementById("big");
        // 思路：鼠标移入小盒子时 遮罩显示 大盒子显示
        // 鼠标移出小盒子是 遮罩隐藏 大盒子隐藏
        small.onmouseover = function() {
            drag.style.display = 'block';
            big.style.display = 'block';
        }
        small.onmouseout = function() {
            drag.style.display = 'none';
            big.style.display = 'none';
        }
        small.onmousemove = function(e) {
            var smallLeft = e.clientX - drag.offsetWidth / 2;
            var smallTop = e.clientY - drag.offsetHeight / 2;
            drag.style.top = smallTop + 'px';
            drag.style.left = smallLeft + 'px';
            if(drag.offsetTop <=0) {
                drag.style.top = 0;
            }
            if(drag.offsetLeft <=0) {
                drag.style.left = 0;
            }
            // 思路：求出遮罩最大可移动的范围
            var maxLeft = small.offsetWidth - drag.offsetWidth;
            var maxTop = small.offsetHeight - drag.offsetHeight;
            if(drag.offsetLeft > maxLeft) {
                drag.style.left = maxLeft + 'px';
            }
            if(drag.offsetTop > maxTop) {
                drag.style.top = maxTop + 'px';
            }
            // 思路：求出大盒子最大可移动的范围
            var bigLeft = bigImg.offsetWidth - big.offsetWidth;
            var bigTop = bigImg.offsetHeight - big.offsetHeight;
            var x = drag.offsetLeft / maxLeft;
            var y = drag.offsetTop / maxTop;
            bigImg.style.left = -x * bigLeft + 'px';
            bigImg.style.top = -y * bigTop + 'px';
            console.log(drag.offsetLeft)
        }
    </script>
</body>
</html>