lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!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;
        }
        #container {
            position: relative;
        }
        #small {
            width: 400px;
            height: 400px;
            position: relative;
        }
        #small img {
            width: 100%;
            height: 100%;
        }
        #big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 400px;
            display: none;
            overflow: hidden;
        }
        #drag {
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,.3);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #pictures {
            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="pictures" alt="">
        </div>
    </div>
    <script>
        var small = document.getElementById("small");
        var drag = document.getElementById("drag");
        var big = document.getElementById("big");
        var pictures = document.getElementById("pictures");
        small.onmouseover = function() {
            big.style.display = 'block';
            drag.style.display = 'block';
        }
        small.onmouseout = function() {
            big.style.display = 'none';
            drag.style.display = 'none';
        }
        small.onmousemove = function(event) {
            var left1 = event.clientX - drag.offsetWidth / 2;
            var top1 = event.clientY - drag.offsetHeight / 2;
            drag.style.left = left1 + 'px';
            drag.style.top = top1 + 'px';
            if(drag.offsetTop <= 0) {
                   drag.style.top = 0;
            }
            if(drag.offsetLeft <= 0) {
                   drag.style.left = 0;
            }
            var left2 = small.offsetWidth - drag.offsetWidth;
            var top2 = small.offsetHeight - drag.offsetHeight;
              if(drag.offsetTop > top2) {
                   drag.style.top = top2 + 'px';
            }
            if(drag.offsetLeft > left2) {
                   drag.style.left = left2 + 'px';
            }
            var bigLeft = pictures.offsetWidth - big.offsetWidth;
            var bigTop = pictures.offsetHeight - big.offsetHeight;
            var x = drag.offsetLeft / left2;
            var y = drag.offsetTop / top2;
            pictures.style.top = -bigTop * y + 'px';
            pictures.style.left = -bigLeft * x + 'px';

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