https://www.su-usedbook.com/assets/js/zoom-image.js

1/**
2 * by MonsterDuang
3 */
4;(function($) {
5    /**
6     * 1, 缩略图大小和父容器大小一致
7     * 2, 父容器 href 属性为高清图片路径
8     */
9    $.fn.zoomImage = function(paras) {
10        /**
11         * 默认参数
12         */
13        var defaultParas = {
14            layerW: 100, // 遮罩宽度
15            layerH: 100, // 遮罩高度
16            layerOpacity: 0.2, // 遮罩透明度
17            layerBgc: '#000', // 遮罩背景颜色
18            showPanelW: 500, // 显示放大区域宽
19            showPanelH: 500, // 显示放大区域高
20            marginL: 5, // 放大区域离缩略图右侧距离
21            marginT: 0 // 放大区域离缩略图上侧距离
22        };
23
24        paras = $.extend({}, defaultParas, paras);
25
26        $(this).each(function() {
27            var self = $(this).css({position: 'relative'});
28            var selfOffset = self.offset();
29            var imageW = self.width(); // 图片高度
30            var imageH = self.height();
31
32            self.find('img').css({
33                width: '100%',
34                height: '100%'
35            });
36
37            // 宽放大倍数
38            var wTimes = paras.showPanelW / paras.layerW;
39            // 高放大倍数
40            var hTimes = paras.showPanelH / paras.layerH;
41
42            // 放大图片
43            var img = $('<img>').attr('src', self.attr("href")).css({
44                position: 'absolute',
45                left: '0',
46                top: '0',
47                width: imageW * wTimes,
48                height: imageH * hTimes
49            }).attr('id', 'big-img');
50
51            // 遮罩

52            var layer = $('<div>').css({
53                display: 'none',
54                position: 'absolute',
55                left: '0',
56                top: '0',
57                backgroundColor: paras.layerBgc,
58                width: paras.layerW,
59                height: paras.layerH,
60                opacity: paras.layerOpacity,
61                border: '1px solid #ccc',
62                cursor: 'crosshair'
63            });
64
65            // 放大区域
66            var showPanel = $('<div>').css({
67                display: 'none',
68                position: 'absolute',
69                overflow: 'hidden',
70                left: imageW + paras.marginL,
71                top: paras.marginT,
72                width: paras.showPanelW,
73                height: paras.showPanelH
74            }).append(img);
75
76            self.append(layer).append(showPanel);
77
78            self.on('mousemove', function(e) {
79                // 鼠标相对于缩略图容器的坐标
80                var x = e.pageX - selfOffset.left;
81                var y = e.pageY - selfOffset.top;
82
83                if(x <= paras.layerW / 2) {
84                    x = 0;
85                }else if(x >= imageW - paras.layerW / 2) {
86                    x = imageW - paras.layerW;
87                }else {
88                    x = x - paras.layerW / 2;
89                }
90
91                if(y < paras.layerH / 2) {
92                    y = 0;
93                } else if(y >= imageH - paras.layerH / 2) {
94                    y = imageH - paras.layerH;
95                } else {
96                    y = y - paras.layerH / 2;
97                }
98
99                layer.css({
100                    left: x,
101                    top: y
102                });
103
104                img.css({
105                    left: -x * wTimes,
106                    top: -y * hTimes
107                });
108            }).on('mouseenter', function() {
109                layer.show();
110                showPanel.show();
111            }).on('mouseleave', function() {
112                layer.hide();
113                showPanel.hide();
114            });
115        });
116    }
117})(jQuery);