回答編集履歴
2
詳細なコードを追加
test
CHANGED
|
@@ -73,3 +73,121 @@
|
|
|
73
73
|
人が書いたコードを好きかっていうのは気持ちがいいものなので、また出してください。（笑）
|
|
74
74
|
|
|
75
75
|
これが正解ということもないので、理由に合点がいくものだけ取り入れていけばいいと思います。
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
＜追記＞
|
|
80
|
+
|
|
81
|
+
他の人のコードに触発されたので、全体も書いてみました。
|
|
82
|
+
|
|
83
|
+
なんか頑張りすぎなコードですね。
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
|
|
89
|
+
<img src="text.jpg" height="100%" id="translation-image">
|
|
90
|
+
|
|
91
|
+
<div id="resizeImage">
|
|
92
|
+
|
|
93
|
+
<div class="scaleUp">
|
|
94
|
+
|
|
95
|
+
<i class="fa fa-plus fa-4x"></i>
|
|
96
|
+
|
|
97
|
+
<div class="p-hover-balloon">拡大</div>
|
|
98
|
+
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="scaleDown">
|
|
102
|
+
|
|
103
|
+
<i class="fa fa-minus fa-4x"></i>
|
|
104
|
+
|
|
105
|
+
<div class="p-hover-balloon">縮小</div>
|
|
106
|
+
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="scaleInitial">
|
|
110
|
+
|
|
111
|
+
<i class="fa fa-refresh fa-4x"></i>
|
|
112
|
+
|
|
113
|
+
<div class="p-hover-balloon">初期化</div>
|
|
114
|
+
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
```javascript
|
|
124
|
+
|
|
125
|
+
//vendorprefixの判定
|
|
126
|
+
|
|
127
|
+
var venderPrefix = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
|
|
128
|
+
|
|
129
|
+
(/firefox/i).test(navigator.userAgent) ? 'moz' :
|
|
130
|
+
|
|
131
|
+
(/trident/i).test(navigator.userAgent) ? 'ms' :
|
|
132
|
+
|
|
133
|
+
'opera' in window ? 'O' : '';
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
$(document).ready(function(){
|
|
138
|
+
|
|
139
|
+
//ページの画像のリサイズの挙動
|
|
140
|
+
|
|
141
|
+
var resizeImage = function(elem, option){
|
|
142
|
+
|
|
143
|
+
var self = this;
|
|
144
|
+
|
|
145
|
+
var min = option.min || 0;
|
|
146
|
+
|
|
147
|
+
var max = option.max || 0;
|
|
148
|
+
|
|
149
|
+
var current = 100;
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
self.addRate = function(rate){
|
|
154
|
+
|
|
155
|
+
self.setRate(current + rate);
|
|
156
|
+
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
self.setRate = function(rate){
|
|
162
|
+
|
|
163
|
+
if (rate < min) rate= min;
|
|
164
|
+
|
|
165
|
+
if (0 < max && max < rate) rate = max;
|
|
166
|
+
|
|
167
|
+
current = rate;
|
|
168
|
+
|
|
169
|
+
elem.style[venderPrefix + 'Transform'] = 'scale(' + current / 100 + ')';
|
|
170
|
+
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
var img = new resizeImage($('#translation-image')[0], {min:50, max:300});
|
|
178
|
+
|
|
179
|
+
$('#resizeImage .scaleUp').on('click', function(){img.addRate(50);});
|
|
180
|
+
|
|
181
|
+
$('#resizeImage .scaleDown').on('click', function(){img.addRate(-50);});
|
|
182
|
+
|
|
183
|
+
$('#resizeImage .scaleInitial').on('click', function(){img.setRate(100);});
|
|
184
|
+
|
|
185
|
+
});
|
|
186
|
+
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
関数名はaddRateとsetRateとしました。
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
#resizeImageが何度も検索される点は、最初の１回だけなので、そんなに影響はないかなという考えでいます。
|
1
ひとこと
test
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
すごくきれいに書けているとおもいます。
|
|
2
2
|
|
|
3
3
|
すぐに理解できました。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
イベントの設定回りだけ書きました。
|
|
4
8
|
|
|
5
9
|
|
|
6
10
|
|