回答編集履歴

2

補足依頼欄に合わせて追記

2021/07/17 06:34

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -39,3 +39,143 @@
39
39
  [https://www.cssscript.com/demo/vanilla-js-library-for-image-zoom-and-pan/](https://www.cssscript.com/demo/vanilla-js-library-for-image-zoom-and-pan/)
40
40
 
41
41
  [https://www.cssscript.com/demo/image-pan-lc-mouse-drag/](https://www.cssscript.com/demo/image-pan-lc-mouse-drag/)
42
+
43
+
44
+
45
+ ---
46
+
47
+
48
+
49
+ # 補足依頼欄に合わせて追記
50
+
51
+
52
+
53
+ サンプル置いておきます。
54
+
55
+
56
+
57
+ [https://jsfiddle.net/Lhankor_Mhy/jw91yx3p/](https://jsfiddle.net/Lhankor_Mhy/jw91yx3p/)
58
+
59
+
60
+
61
+
62
+
63
+ ```js
64
+
65
+ $.fn.ImageExpansion = function (options) {
66
+
67
+ var target = $(this);
68
+
69
+ var settings = $.extend({
70
+
71
+ 'pan': 2,
72
+
73
+ 'drag': 100
74
+
75
+ }, options);
76
+
77
+ /*
78
+
79
+ * 初期設定
80
+
81
+ */
82
+
83
+ var setImage = function (obj) {
84
+
85
+
86
+
87
+ //画像のSRC取得
88
+
89
+ var src = $("img", target).attr('src');
90
+
91
+ //右の枠の大きさ ドラッグ枠の数値 * 倍率
92
+
93
+ var hw = settings.drag * settings.pan;
94
+
95
+ $(".pan_image", target).css({ 'width': hw, 'height': hw });
96
+
97
+ //右の枠へ背景画像を設定
98
+
99
+ $(".pan_image", target).css({ 'background-image': 'url(' + src + ')' });
100
+
101
+ //左の画像の幅を倍率で割り、max-widthに指定する幅を得る
102
+
103
+ var img_w = $("img", target).width();
104
+
105
+ img_w = Math.floor(img_w / settings.pan);
106
+
107
+ var img_h = $("img", target).height();
108
+
109
+ img_h = Math.floor(img_h / settings.pan);
110
+
111
+ //左の枠の幅を上で計算した幅と高さに設定
112
+
113
+ $(target).css({ 'width': img_w, 'height': img_h });
114
+
115
+ //左の画像を上で計算した幅と高さに設定
116
+
117
+ $("img", target).css({ 'max-width': img_w, 'height': img_h });
118
+
119
+ //ドラッグ枠の大きさを設定
120
+
121
+ $(".pan_mouse", target).css({ 'width': settings.drag, 'height': settings.drag });
122
+
123
+ };
124
+
125
+
126
+
127
+ /*
128
+
129
+ * ドラッグ
130
+
131
+ */
132
+
133
+ $(".pan_mouse", target).draggable({
134
+
135
+ containment: "parent"
136
+
137
+ });
138
+
139
+
140
+
141
+ /*
142
+
143
+ * ドラッグした距離で背景画像の位置を変更
144
+
145
+ */
146
+
147
+ $(".pan_mouse", target).on('mousemove', function (e) {
148
+
149
+ //image_expansion ウインド上の位置
150
+
151
+ var div = $(target).offset();
152
+
153
+ var ex_left = Math.floor(div.left);
154
+
155
+ var ex_top = Math.floor(div.top);
156
+
157
+ //pan_mouse ウインド上の位置
158
+
159
+ var div = $('.pan_mouse', target).offset();
160
+
161
+ var pan_left = Math.floor(div.left);
162
+
163
+ var pan_top = Math.floor(div.top);
164
+
165
+ //image_expansion内におけるpan_mouseの上下位置差分
166
+
167
+ var left = (pan_left - ex_left) * settings.pan;
168
+
169
+ var top = (pan_top - ex_top) * settings.pan;
170
+
171
+
172
+
173
+ $(".pan_image", target).css({ 'background-position': '-' + left + 'px -' + top + 'px' });
174
+
175
+ });
176
+
177
+ return setImage($(this));
178
+
179
+ };
180
+
181
+ ```

1

ついでに、適当にググってみた結果を貼っておきます。

2021/07/17 06:34

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -5,3 +5,37 @@
5
5
  [Leaflet.jsを使って任意の画像の拡縮を行いたい - Qiita](https://qiita.com/yuskesuzki@github/items/5fd2fcb52729061da33c)
6
6
 
7
7
  [leaflet js 画像拡大 - Google 検索](https://www.google.com/search?q=leaflet+js+画像拡大)
8
+
9
+
10
+
11
+ ---
12
+
13
+
14
+
15
+ ついでに、適当にググってみた結果を貼っておきます。
16
+
17
+
18
+
19
+ [https://www.jqueryscript.net/demo/Simple-jQuery-Image-Crop-Zoom-Plugin-ZoomCrop/](https://www.jqueryscript.net/demo/Simple-jQuery-Image-Crop-Zoom-Plugin-ZoomCrop/)
20
+
21
+ [https://www.jqueryscript.net/demo/jQuery-Plugin-To-Pan-An-Image-In-A-Container-simplePan/](https://www.jqueryscript.net/demo/jQuery-Plugin-To-Pan-An-Image-In-A-Container-simplePan/)
22
+
23
+ [https://www.jqueryscript.net/demo/Customizable-jQuery-Image-Zoom-Pan-Plugin-panzoom/](https://www.jqueryscript.net/demo/Customizable-jQuery-Image-Zoom-Pan-Plugin-panzoom/)
24
+
25
+ [https://www.jqueryscript.net/demo/Simple-jQuery-Image-Zoom-With-Mouse-Wheel-or-Touch-Scroll/](https://www.jqueryscript.net/demo/Simple-jQuery-Image-Zoom-With-Mouse-Wheel-or-Touch-Scroll/)
26
+
27
+ [https://www.jqueryscript.net/demo/SVG-Zooming-Panning-Plugin-jQuery-SvgZoom/](https://www.jqueryscript.net/demo/SVG-Zooming-Panning-Plugin-jQuery-SvgZoom/)
28
+
29
+ [https://www.jqueryscript.net/demo/Touch-enabled-Image-Zooming-Panning-Plugin-jQuery-imgViewer2/](https://www.jqueryscript.net/demo/Touch-enabled-Image-Zooming-Panning-Plugin-jQuery-imgViewer2/)
30
+
31
+ [https://www.jqueryscript.net/demo/Simple-Image-Viewer-jQuery/](https://www.jqueryscript.net/demo/Simple-Image-Viewer-jQuery/)
32
+
33
+ [https://www.jqueryscript.net/demo/zoom-wheel-pan-drag-image/](https://www.jqueryscript.net/demo/zoom-wheel-pan-drag-image/)
34
+
35
+ [https://www.jqueryscript.net/demo/smooth-pan-zoom-alotta/](https://www.jqueryscript.net/demo/smooth-pan-zoom-alotta/)
36
+
37
+ [https://www.npmjs.com/package/react-image-zoom-pan](https://www.npmjs.com/package/react-image-zoom-pan)
38
+
39
+ [https://www.cssscript.com/demo/vanilla-js-library-for-image-zoom-and-pan/](https://www.cssscript.com/demo/vanilla-js-library-for-image-zoom-and-pan/)
40
+
41
+ [https://www.cssscript.com/demo/image-pan-lc-mouse-drag/](https://www.cssscript.com/demo/image-pan-lc-mouse-drag/)