lovecoding
/
web0331


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!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;
      }
      #small {
        width: 400px;
        height: 400px;
      }
      #drag {
        width: 200px;
        height: 200px;
        background: rgba(0, 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="./images/6.jpg" alt="" />
        <div id="drag"></div>
      </div>
      <div id="big">
        <img id="bigImg" src="./images/7.jpg" alt="" />
      </div>
    </div>
    <script>
      var small = document.getElementById("small");
      var big = document.getElementById("big");
      var drag = document.getElementById("drag");
      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.top = -bigTop * y + "px";
        bigImg.style.left = -bigLeft * x + "px";
      };
    </script>
  </body>
</html>