custom.js
... ...
@@ -5,43 +5,51 @@ y_cursor = 0,
5 5
x_img_ele = 0,
6 6
y_img_ele = 0;
7 7
8
-$( document ).ready(
9 8
10 9
function zoom(zoomincrement) {
11
- img_ele = document.getElementById('drag-img');
12
- var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
13
- img_ele.style.width = (pre_width * zoomincrement) + 'px';
14
- img_ele.style.height = (pre_height * zoomincrement) + 'px';
15
- img_ele = null;
10
+
11
+ img_ele = document.getElementById('drag-img');
12
+ var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
13
+ img_ele.style.width = (pre_width * zoomincrement) + 'px';
14
+ img_ele.style.height = (pre_height * zoomincrement) + 'px';
15
+ img_ele = null;
16
+
16 17
}
17 18
18 19
20
+ $(document).ready(
21
+
19 22
document.getElementById('zoomout').addEventListener('click', zoom(0.5));
20 23
document.getElementById('zoomin').addEventListener('click', zoom(1.5));
21 24
25
+ );
26
+
22 27
function start_drag() {
23
- img_ele = this;
24
- x_img_ele = window.event.clientX - document.getElementById('drag-img').offsetLeft;
25
- y_img_ele = window.event.clientY - document.getElementById('drag-img').offsetTop;
28
+ img_ele = this;
29
+ x_img_ele = window.event.clientX - document.getElementById('drag-img').offsetLeft;
30
+ y_img_ele = window.event.clientY - document.getElementById('drag-img').offsetTop;
26 31
}
27 32
28 33
function stop_drag() {
29
- img_ele = null;
34
+ img_ele = null;
30 35
}
31 36
32 37
function while_drag() {
33
- var x_cursor = window.event.clientX;
34
- var y_cursor = window.event.clientY;
35
- if (img_ele !== null) {
36
- img_ele.style.left = (x_cursor - x_img_ele) + 'px';
37
- img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';
38
-
39
- console.log(img_ele.style.left+' - '+img_ele.style.top);
40
-
41
- }
38
+ var x_cursor = window.event.clientX;
39
+ var y_cursor = window.event.clientY;
40
+ if (img_ele !== null) {
41
+ img_ele.style.left = (x_cursor - x_img_ele) + 'px';
42
+ img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';
43
+
44
+ console.log(img_ele.style.left+' - '+img_ele.style.top);
45
+
46
+ }
42 47
}
43 48
44
- document.getElementById('drag-img').addEventListener('mousedown', start_drag);
45
- document.getElementById('container').addEventListener('mousemove', while_drag);
46
- document.getElementById('container').addEventListener('mouseup', stop_drag);
47
-);
... ...
\ No newline at end of file
0
+ $(document).ready(
1
+
2
+ document.getElementById('drag-img').addEventListener('mousedown', start_drag);
3
+ document.getElementById('container').addEventListener('mousemove', while_drag);
4
+ document.getElementById('container').addEventListener('mouseup', stop_drag);
5
+
6
+ );
... ...
\ No newline at end of file