|   字数统计: 802(字)

js实现放大镜特效

发表于 | 分类于 | 阅读次数

js实现放大镜特效

效果

实现原理：

鼠标在小图片上移动时，通过捕获鼠标在小图片上的位置，定位大图片的相应位置

技术点

  • 事件捕获
    • onmouseover
    • onmouseout
    • onmousemove
  • 定位
    • offsetLeft
    • offsetTop
    • offsetWidth
    • offsetHeight
    • event.clientX
    • event.clientY

  • 计算
  • 浏览器兼容性

问号部分即：
objBigBoxImage.style.left
很容易求出

同理可以求出
objBigBoxImage.style.top

源码
github clone地址:

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
    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }
        #small-box {
            position: relative;
            z-index: 1;
        }
        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }
        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }
        #big-box img {
            position: absolute;
            z-index: 5
        }
    </style>
    <script>
        //页面加载完毕后执行
        window.onload = function () {
            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objMark = document.getElementById("mark");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
            objMark.onmouseover = function () {
                objFloatBox.style.display = "block"
                objBigBox.style.display = "block"
            }
            objMark.onmouseout = function () {
                objFloatBox.style.display = "none"
                objBigBox.style.display = "none"
            }
            objMark.onmousemove = function (ev) {
                var _event = ev || window.event;  //兼容多个浏览器的event参数模式
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
                if (left < 0) {
                    left = 0;
                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                    left = objMark.offsetWidth - objFloatBox.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                    top = objMark.offsetHeight - objFloatBox.offsetHeight;
                }
                objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
                objFloatBox.style.top = top + "px";
                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
            }
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="image/macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="image/macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

解决兼容性问题
测试工具：IETester
详情讲解

主要思路：加一个遮罩层

另附jQuery实现代码

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
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
<script>
    $(function(){
        var markWidth = $('#mark').width(),
            markHeight = $('#mark').height(),
            floatBoxWidth = $('#float-box').width(),
            floatBoxHeight = $('#float-box').height(),
            percent = $('#big-box').width() / $('#float-box').width()
        $('#mark').on('mouseover', function(){
            $('#float-box').show()
            $('#big-box').show()
        }).on('mouseout', function(){
            $('#float-box').hide()
            $('#big-box').hide()
        }).on('mousemove', function(e){
            e = e || window.event
            var markOffset = $('#mark').offset()
            var left = e.clientX - markOffset.left - floatBoxWidth / 2,
                top = e.clientY - markOffset.top - floatBoxHeight / 2
            if(left < 0) left =0
            else if(left > markWidth - floatBoxWidth) left = markWidth - floatBoxWidth
            if(top < 0) top =0
            else if(top > markHeight - floatBoxHeight) top = markHeight - floatBoxHeight
            $('#float-box').css({left: left+'px', top: top+'px'})
            $('#big-box>img').css({left: -left*percent+'px', top: -top*percent+'px'})
        })
    })
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="image/macbook-small.jpg"/>
</div>
<div id="big-box">
<img src="image/macbook-big.jpg"/>
</div>
</div>
</body>
</html>

参考：

慕课网 用JS实现放大镜特效

AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏，谢谢支持！