web-explore-demo/source/图片放大镜效果/index.html at master · vannvan/web-explore-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
  <head>
    <title>图片放大镜</title>
  </head>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #box,
    #bigBox {
      width: 350px;
      height: 350px;
      border: 1px solid black;
      float: left;
      margin: 15px;
    }
    #bigBox {
      display: none;
      overflow: hidden;
      position: relative;
    }
    #box img {
      width: 350px;
      height: 350px;
    }
    #bigBox img {
      position: absolute;
      width: 700px;
      height: 700px;
    }
    #box {
      position: relative;
    }
    #mark {
      width: 175px;
      height: 175px;
      position: absolute;
      cursor: move;
      background: rgba(0, 0, 0, 0.3);
    }
  </style>
  <body>
    <div id="box">
      <img src="http://www.jq22.com/img/cs/500x500-2.png" />
    </div>
    <div id="bigBox">
      <img src="http://www.jq22.com/img/cs/500x500-2.png" />
    </div>
    <script type="text/javascript">
      var oBox = document.getElementById("box");
      var bigBox = document.getElementById("bigBox");
      var bigImg = document.getElementsByTagName("img")[1];
      var mark;
      //当鼠标划上时，创建小盒子；把小盒子放进页面；让大盒子显示；
      oBox.onmouseenter = function () {
        mark = document.createElement("div");
        mark.id = "mark";
        oBox.appendChild(mark);
        bigBox.style.display = "block";
      };
      // 当鼠标移动时，让小盒子移动，并且让大盒子中的图片跟着鼠标移动而移动；比例值是1:2;并且方向相反；
      oBox.onmousemove = function (e) {
        var minL = 0;
        var maxL = oBox.offsetWidth - mark.offsetWidth - 2;
        console.log(maxL);
        var minT = 0;
        var maxT = oBox.offsetHeight - mark.offsetHeight - 2;
        console.log(maxT);
        var curL = e.clientX - oBox.offsetLeft - mark.offsetWidth / 2;
        var curT = e.clientY - oBox.offsetTop - mark.offsetHeight / 2;
        if (curL <= minL) {
          curL = minL;
        }
        if (curL >= maxL) {
          curL = maxL;
        }
        if (curT <= minT) {
          curT = minT;
        }
        if (curT >= maxT) {
          curT = maxT;
        }
        mark.style.left = curL + "px";
        mark.style.top = curT + "px";
        // mark 和大图片移动距离存在2倍的关系；
        bigImg.style.left = -2 * curL + "px";
        bigImg.style.top = -2 * curT + "px";
      };
      // 当鼠标移出，小盒子消失大盒子也消失；
      oBox.onmouseleave = function () {
        oBox.removeChild(mark);
        bigBox.style.display = "none";
      };
    </script>
  </body>
</html>