lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!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;
        }
        #drag {
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,.3);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 400px;
            overflow: hidden;
            display: none;
        }
        #bigImg {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="small">
            <img src="../../../img/6.jpg" alt="">
            <div id="drag"></div>
        </div>
        <div id="big">
            <img id="bigImg" src="../../../img/7.jpg" alt="">
        </div>
    </div>
    <script>
        var small = document.getElementById("small");
        var drag = document.getElementById("drag");
        var big = document.getElementById("big");
        var bigImg = document.getElementById("bigImg");
        // 鼠标滑入
        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.left = smallLeft + 'px';
            drag.style.top = smallTop + 'px';
            if(drag.offsetLeft <= 0) {
                drag.style.left = 0;
            } 
            if(drag.offsetTop <= 0) {
                drag.style.top = 0;
            }
            // // 可允许移动的最大范围
            var left1 = small.offsetWidth - drag.offsetWidth;
            var top1 = small.offsetHeight - drag.offsetHeight;
            if(drag.offsetLeft >= left1) {
                drag.style.left = left1 + "px";
            }
            if(drag.offsetTop >= top1) {
                drag.style.top = top1 + "px";
            }

            // 大图允许移动的最大范围
            var bigLeft = bigImg.offsetWidth - big.offsetWidth;
            var bigTop = bigImg.offsetHeight - big.offsetHeight;

            // 比例
            var x = drag.offsetLeft / left1;
            var y = drag.offsetTop / top1;

            // 换算大图移动具体位置
            bigImg.style.left = -x * bigLeft + 'px';
            bigImg.style.top = -y * bigTop + 'px';

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