回答編集履歴
1
a
answer
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
angularjsのcontrollerを使うともっときれいになると思いますが
|
|
2
|
+
現状を修正する場合こんな感じでしょうか。
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
[サンプルリンク](https://pinpikokun.github.io/index4.html)
|
|
4
|
-
ソース的に異なるところはありますか？
|
|
5
5
|
|
|
6
|
-
[サンプルリンク](https://pinpikokun.github.io/index3.html)
|
|
7
|
-
|
|
8
6
|
```html
|
|
9
7
|
<html>
|
|
10
8
|
<head>
|
|
@@ -17,23 +15,33 @@
|
|
|
17
15
|
<link rel="stylesheet" href="my.css"/>
|
|
18
16
|
|
|
19
17
|
<script>
|
|
20
|
-
|
|
18
|
+
var app = ons.bootstrap('app', []);
|
|
19
|
+
document.addEventListener('init', function(event) {
|
|
20
|
+
if(event.target.id !== 'page2') return;
|
|
21
|
+
|
|
21
|
-
|
|
22
|
+
var target = $("#page2 img.photo-zoom_jq");
|
|
23
|
+
console.log(target);
|
|
22
|
-
|
|
24
|
+
var prevScale = 1;
|
|
23
|
-
|
|
25
|
+
var scale = 1;
|
|
24
|
-
|
|
26
|
+
$(document).on('transform', '#page2 img.photo-zoom_jq', function(event) {
|
|
25
|
-
|
|
27
|
+
console.log('transform is detected.');
|
|
26
|
-
|
|
28
|
+
scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
|
|
27
|
-
|
|
29
|
+
target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
|
|
28
|
-
|
|
30
|
+
});
|
|
29
|
-
|
|
31
|
+
$(document).on('release', '#page2 img.photo-zoom_jq', function(event) {
|
|
30
|
-
|
|
32
|
+
console.log('release is detected.');
|
|
33
|
+
scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
|
|
31
|
-
|
|
34
|
+
console.log('scale:' + scale);
|
|
35
|
+
target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
|
|
36
|
+
console.log('css end.');
|
|
32
|
-
|
|
37
|
+
});
|
|
33
|
-
|
|
38
|
+
$(document).on('touchmove', '#page2 img.photo-zoom_jq', function(event) {
|
|
34
|
-
console.log('touchmove is detected.');
|
|
35
|
-
|
|
39
|
+
event.preventDefault();
|
|
36
|
-
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
document.addEventListener('destroy', function(event) {
|
|
43
|
+
$(document).off('transform release touchmove');
|
|
44
|
+
});
|
|
37
45
|
</script>
|
|
38
46
|
</head>
|
|
39
47
|
|
|
@@ -41,7 +49,7 @@
|
|
|
41
49
|
<ons-navigator var="navi" page="page.html"></ons-navigator>
|
|
42
50
|
|
|
43
51
|
<ons-template id="page.html">
|
|
44
|
-
<ons-page>
|
|
52
|
+
<ons-page id="page1">
|
|
45
53
|
<ons-toolbar>
|
|
46
54
|
<div class="left">
|
|
47
55
|
<ons-back-button>Back</ons-back-button>
|
|
@@ -61,7 +69,7 @@
|
|
|
61
69
|
</ons-template>
|
|
62
70
|
|
|
63
71
|
<ons-template id="page2.html">
|
|
64
|
-
<ons-page>
|
|
72
|
+
<ons-page id="page2">
|
|
65
73
|
<ons-toolbar>
|
|
66
74
|
<div class="left">
|
|
67
75
|
<ons-back-button>Back</ons-back-button>
|