鼠标跟随_放大镜（5-1）

item

效果图13

注意的问题

  • [ ] 布局距离
    图15

  • [ ] 边界判断
    mark和img-bigger都需要边界判断
    img_bigger不做边界判断会出现下图情况
    图13，14

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    if (left < minL) {
               tempL = minL;
               mark.style.left = 0 + "px"; //px不能少
           } else if (left > maxL) {
               tempL = maxL;
               mark.style.left = maxL + "px";
           } else {
               tempL = left;
               mark.style.left = left + "px";
           }
           if (top < minT) {
               tempT = minT;
               mark.style.top = 0 + "px";
           } else if (top > maxT) {
               tempT = maxT;
               mark.style.top = maxT + "px";
           } else {
               tempT = top;
               mark.style.top = top + "px";
           }

  • [ ] 大图的跟随移动

1
2
3
4
5
6
7
8
9
10
11
// 改变img_bigger的top和left值，随mark框移动而移动
        // var img_bigger = box_bigger.getElementsByTagName("img")[0]; 
    var img_bigger=document.getElementById("img_bigger");    
        // left,top不是最终设置的值，也需要做边界判断，用temp临时值判断
    img_bigger.style.top = -tempT * 2 + "px";//注意是负值，mark向右移动，box_bigger需要向左移动
        img_bigger.style.left = -tempL * 2 + "px";
             // 第二种表示方法 
        var box_bigger=document.getElementById("box_bigger");
        box_bigger.firstElementChild.style.top=-tempT * 2 + "px";
        box_bigger.firstElementChild.style.left=-tempL * 2 + "px";

完整代码

放大2.5陪参看修改数字

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body,
    div {
        margin: 0;
        padding: 0;
    }
    
    #box {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 50px;
        box-shadow: 0px 0px 5px #888888;
    }
    
    #box img {
        width: 100%;
        height: 100%;
    }
    
    #mark {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        background-color: #000;
        opacity: 0.5;
        filter: alpha(opacity=50);
        /*兼容IE*/
        cursor: move;
    }
    
    #box_bigger {
        display: none;
        position: absolute;
        overflow: hidden;
        top: 50px;
        left: 470px;
        width: 400px;/*修改500px*/        
        height: 400px;/*修改500px*/  
        box-shadow: 0px 0px 5px #888888;
    }
    
    #box_bigger img {
        position:absolute;/*针对于box_bigger定位*/
        top:0;
        left:0;
        /*修改：这里不变（图片相对于box_bigger）此时1000px大小的图，相当于400px的原图放大2.5倍*/
        width: 200%;
        /*图片比较大*/
        height: 200%;
    }
    </style>
</head>
<div id="box">
    <img src="http://wx2.sinaimg.cn/mw690/9c698161gy1fgkp1vtrcyj209q09qq5g.jpg">
    <div id="mark"></div>
</div>
<div id="box_bigger">
    <img  id="img_bigger" src="http://wx2.sinaimg.cn/mw690/9c698161gy1fgkp1w2icgj20m80m8n5d.jpg">
</div>
<body>
    <script type="text/javascript">
    //使用 ，则记得上一句的；一定要去掉
    var box = document.getElementById('box'),
        mark = document.getElementById("mark");
    function setPosition(e) {
        e = e || window.event;
        var top = e.clientY - box.offsetTop - (mark.offsetHeight / 2),
            left = e.clientX - box.offsetLeft - (mark.offsetWidth / 2)
        var minL = 0,
            minT = 0,
            maxL = box.offsetWidth - mark.offsetWidth,
            maxT = box.offsetHeight - mark.offsetHeight;
        var tempL, tempT;//必须用临时的值做边界判断
        //判断边界：mark和img_bigger都需要边界判断
        if (left < minL) {
            tempL = minL;
            mark.style.left = 0 + "px"; //px不能少
        } else if (left > maxL) {
            tempL = maxL;
            mark.style.left = maxL + "px";
        } else {
            tempL = left;
            mark.style.left = left + "px";
        }
        if (top < minT) {
            tempT = minT;
            mark.style.top = 0 + "px";
        } else if (top > maxT) {
            tempT = maxT;
            mark.style.top = maxT + "px";
        } else {
            tempT = top;
            mark.style.top = top + "px";
        }
        // 改变img_bigger的top和left值，随mark框移动而移动
        // var img_bigger = box_bigger.getElementsByTagName("img")[0]; 
        var img_bigger=document.getElementById("img_bigger");    
        // left,top不是最终设置的值，也需要做边界判断，注意是负值，mark向右移动，box_bigger需要向左移动
        img_bigger.style.top = -tempT * 2 + "px";//修改i：2.5（mark移动200，img_bigger移动1000-500，所以是2.5倍）
        img_bigger.style.left = -tempL * 2 + "px";
        // 第二种表示方法 
        // var box_bigger=document.getElementById("box_bigger");
        // box_bigger.firstElementChild.style.top=-tempT * 2 + "px";
        // box_bigger.firstElementChild.style.left=-tempL * 2 + "px";
    }
    box.onmouseenter = function(e) {
        mark.style.display = "block";
        box_bigger.style.display = "block";
        setPosition(e);
    }
    box.onmousemove = function(e) {
        setPosition(e);
    }
    box.onmouseleave = function(e) {
        mark.style.display = "none";
        box_bigger.style.display = "none";
    }
    </script>
</body>
</html>