wnw_show 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/lib/wnw_show/rails/engine.rb +6 -0
- data/lib/wnw_show/rails/version.rb +5 -0
- data/lib/wnw_show/rails.rb +8 -0
- data/lib/wnw_show.rb +1 -0
- data/vendor/assets/audios/wnw_show/show/SoundUnit.swf +0 -0
- data/vendor/assets/audios/wnw_show/show/pin0.swf +0 -0
- data/vendor/assets/audios/wnw_show/show/swflash.cab +0 -0
- data/vendor/assets/images/wnw_show/list/bord.jpg +0 -0
- data/vendor/assets/images/wnw_show/list/delete.png +0 -0
- data/vendor/assets/images/wnw_show/list/gomi.png +0 -0
- data/vendor/assets/images/wnw_show/list/loading.gif +0 -0
- data/vendor/assets/images/wnw_show/list/pin-0.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-1.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-2.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-3.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-4.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-5.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-6.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-7.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-8.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-9.png +0 -0
- data/vendor/assets/images/wnw_show/list/seiton.png +0 -0
- data/vendor/assets/images/wnw_show/show/background.png +0 -0
- data/vendor/assets/images/wnw_show/show/env0.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env1.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env10.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env11.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env12.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env2.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env3.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env4.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env5.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env6.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env7.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env8.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env9.gif +0 -0
- data/vendor/assets/images/wnw_show/show/kirakira2.gif +0 -0
- data/vendor/assets/images/wnw_show/show/null.gif +0 -0
- data/vendor/assets/images/wnw_show/show/tori.png +0 -0
- data/vendor/assets/images/wnw_show/swipe/bord.jpg +0 -0
- data/vendor/assets/images/wnw_show/swipe/icons.png +0 -0
- data/vendor/assets/images/wnw_show/swipe/loader.gif +0 -0
- data/vendor/assets/javascripts/wnw_show/index.js +3 -0
- data/vendor/assets/javascripts/wnw_show/list.js.erb +388 -0
- data/vendor/assets/javascripts/wnw_show/show.js.erb +646 -0
- data/vendor/assets/javascripts/wnw_show/swipe.js +185 -0
- data/vendor/assets/stylesheets/wnw_show/index.css +3 -0
- data/vendor/assets/stylesheets/wnw_show/swipe.css.erb +214 -0
- data/wnw_show.gemspec +19 -0
- metadata +99 -0
@@ -0,0 +1,646 @@
|
|
1
|
+
//--------------------------------------
|
2
|
+
// Queue (FIFO)クラス
|
3
|
+
//--------------------------------------
|
4
|
+
|
5
|
+
function Queue() { this.list = new Array();};
|
6
|
+
Queue.prototype.enqueue = function(a) { this.list.push(a); };
|
7
|
+
Queue.prototype.dequeue = function() {
|
8
|
+
if( this.list.length > 0 ) {
|
9
|
+
return this.list.shift();
|
10
|
+
}
|
11
|
+
return null;
|
12
|
+
};
|
13
|
+
Queue.prototype.size = function() { return this.list.length; };
|
14
|
+
Queue.prototype.toString = function() { return '[' + this.list.join(',') + ']'; };
|
15
|
+
Queue.prototype.get = function(index){ return this.list[index]; };
|
16
|
+
Queue.prototype.randomRemove = function(){
|
17
|
+
if( this.list.length > 0 ) {
|
18
|
+
var index=parseInt(Math.random() * this.list.length);
|
19
|
+
return this.remove(index);
|
20
|
+
}
|
21
|
+
return null;
|
22
|
+
};
|
23
|
+
Queue.prototype.remove = function(index){
|
24
|
+
if( this.list.length > 0 ) {
|
25
|
+
var element;
|
26
|
+
var tmp = new Array();
|
27
|
+
for (i = 0 ; i < this.list.length ; i++){
|
28
|
+
if(i == index){
|
29
|
+
element = this.get(index);
|
30
|
+
}else{
|
31
|
+
tmp.push(this.get(i));
|
32
|
+
}
|
33
|
+
}
|
34
|
+
this.list = tmp ;
|
35
|
+
return element;
|
36
|
+
}
|
37
|
+
return null;
|
38
|
+
};
|
39
|
+
|
40
|
+
//--------------------------------------
|
41
|
+
// Positionクラス
|
42
|
+
//--------------------------------------
|
43
|
+
function Position(x1,y1,x2,y2){
|
44
|
+
this.x1 = x1;
|
45
|
+
this.y1 = y1;
|
46
|
+
this.x2 = x2;
|
47
|
+
this.y2 = y2;
|
48
|
+
this.top = y1;
|
49
|
+
this.left = x1;
|
50
|
+
this.width = x2 - x1;
|
51
|
+
this.height = y2 - y1;
|
52
|
+
this.next = null;
|
53
|
+
}
|
54
|
+
Position.prototype.clone = function(){
|
55
|
+
return new Position(this.x1, this.y1, this.x2, this.y2,this.index);
|
56
|
+
};
|
57
|
+
|
58
|
+
|
59
|
+
|
60
|
+
//--------------------------------------------------
|
61
|
+
//wnw.showライブラリ
|
62
|
+
//--------------------------------------------------
|
63
|
+
var wnw;
|
64
|
+
if (!wnw) wnw = {};
|
65
|
+
if (!wnw.show) wnw.show = {};
|
66
|
+
(function(){
|
67
|
+
var libPath;
|
68
|
+
function start(imgUrlList,message,path,topImageUrl,logoUrl){
|
69
|
+
libPath = path;
|
70
|
+
wnw.show.InitAnime.start(message,onInitAnimeFinish,topImageUrl,logoUrl);
|
71
|
+
for (i = 0; i < imgUrlList.length ; i++) {
|
72
|
+
wnw.show.Slider.addOldImg(imgUrlList[i]);
|
73
|
+
}
|
74
|
+
};
|
75
|
+
function onInitAnimeFinish(){
|
76
|
+
wnw.show.Slider.start();
|
77
|
+
};
|
78
|
+
function libPath(){
|
79
|
+
return libPath;
|
80
|
+
};
|
81
|
+
function addImg(url){
|
82
|
+
wnw.show.Slider.addNewImg(url);
|
83
|
+
};
|
84
|
+
//publicフィールド・関数定義
|
85
|
+
wnw.show.start = start;
|
86
|
+
wnw.show.libPath = libPath;
|
87
|
+
wnw.show.addImg = addImg;
|
88
|
+
})();
|
89
|
+
|
90
|
+
//--------------------------------------------------
|
91
|
+
//wnw.show.InitAmineライブラリ
|
92
|
+
//--------------------------------------------------
|
93
|
+
if (!wnw.show.InitAnime) wnw.show.InitAnime = {};
|
94
|
+
(function(){
|
95
|
+
function log(str){
|
96
|
+
console.log("[wnw.show.InitAnime] " + str);
|
97
|
+
};
|
98
|
+
function Back(position,src,zIndex,opacity){
|
99
|
+
this.position = position;
|
100
|
+
this.src = src;
|
101
|
+
this.zIndex = zIndex;
|
102
|
+
this.opacity = opacity;
|
103
|
+
this.img = $("<img />")
|
104
|
+
.attr("src",src)
|
105
|
+
.css("opacity",0);
|
106
|
+
$("body").append(this.img);
|
107
|
+
};
|
108
|
+
Back.prototype.isLoad = function(){
|
109
|
+
log(this.src + " size is " + this.img.width());
|
110
|
+
//画像のサイズが24以下の場合はロードできていないと判断
|
111
|
+
//(firefoxではロードできていないと画像サイズが24になる)
|
112
|
+
return (this.img.width() >= 24);
|
113
|
+
};
|
114
|
+
Back.prototype.show = function(){
|
115
|
+
log("view" + this.src);
|
116
|
+
this.img.css({"position" : "absolute",
|
117
|
+
"top":this.position.top,
|
118
|
+
"left":this.position.left,
|
119
|
+
"width":this.position.width,
|
120
|
+
"height":this.position.height,
|
121
|
+
"z-index":this.zIndex});
|
122
|
+
this.img.animate({"opacity":this.opacity},FADEIN_TIME);
|
123
|
+
};
|
124
|
+
Back.prototype.hide = function(){
|
125
|
+
log("hide" + this.src);
|
126
|
+
this.img.animate({"opacity":0},FADEIN_TIME);
|
127
|
+
};
|
128
|
+
|
129
|
+
FADEIN_TIME = 3000;
|
130
|
+
|
131
|
+
//最初の写真を表示している時間
|
132
|
+
PHOTO_SPAN = 15000;
|
133
|
+
|
134
|
+
//封筒アニメーションの間隔
|
135
|
+
ANIME_SPAN = 3000;
|
136
|
+
|
137
|
+
//文字のタイピング関連
|
138
|
+
var TYPE_CHAR_SPEED = 100;// 動作スピード
|
139
|
+
var TYPE_CHAR_NL_TIME = 1000;//改行するときの停止時間
|
140
|
+
var TYPE_CHAR_OPACITY = 1;
|
141
|
+
var TYPE_CHAR_CURSOLE = '<span style="color:#ff00ff;">_</span>';// カーソルの形状(HTMLタグ可)
|
142
|
+
var typeCharMessage;
|
143
|
+
var typeCharDiv;
|
144
|
+
|
145
|
+
var gBacks = new Array();
|
146
|
+
var callbackFunction ;
|
147
|
+
|
148
|
+
function start(msg,callback,topImageUrl,logoUrl){
|
149
|
+
log("initAnime start");
|
150
|
+
typeCharMessage=msg;
|
151
|
+
callbackFunction = callback;
|
152
|
+
log("callbackFunction:" + callbackFunction);
|
153
|
+
log("wnw.show.LibPath:" + wnw.show.libPath());
|
154
|
+
gBacks[0]=new Back(new Position(10,10,1200,750) , "<%= asset_path('wnw_show/show/background.png') %>",0,1);//背景のピンクの四角
|
155
|
+
gBacks[1]=new Back(new Position(61,385,178,495) , "<%= asset_path('wnw_show/show/env0.gif') %>",0,1);
|
156
|
+
gBacks[2]=new Back(new Position(277,349,392,435) , "<%= asset_path('wnw_show/show/env1.gif') %>",0,1);
|
157
|
+
gBacks[3]=new Back(new Position(430,138,995,563) , "<%= asset_path('wnw_show/show/env2.gif') %>",0,1);
|
158
|
+
gBacks[4]=new Back(new Position(1024,337,1135,433) , "<%= asset_path('wnw_show/show/env3.gif') %>",0,1);
|
159
|
+
gBacks[5]=new Back(new Position(234,203,356,302) , "<%= asset_path('wnw_show/show/env4.gif') %>",0,1);
|
160
|
+
gBacks[6]=new Back(new Position(679,83,760,136) , "<%= asset_path('wnw_show/show/env5.gif') %>",0,1);
|
161
|
+
gBacks[7]=new Back(new Position(885,40,992,117) , "<%= asset_path('wnw_show/show/env6.gif') %>",0,1);
|
162
|
+
gBacks[8]=new Back(new Position(125,615,259,680) , "<%= asset_path('wnw_show/show/env7.gif') %>",0,1);
|
163
|
+
gBacks[9]=new Back(new Position(279,521,374,597) , "<%= asset_path('wnw_show/show/env8.gif') %>",0,1);
|
164
|
+
gBacks[10]=new Back(new Position(458,602,546,651) , "<%= asset_path('wnw_show/show/env9.gif') %>",0,1);
|
165
|
+
gBacks[11]=new Back(new Position(602,569,688,641) , "<%= asset_path('wnw_show/show/env10.gif') %>",0,1);
|
166
|
+
gBacks[12]=new Back(new Position(801,576,917,672) , "<%= asset_path('wnw_show/show/env11.gif') %>",0,1);
|
167
|
+
gBacks[13]=new Back(new Position(968,641,1070,740) , "<%= asset_path('wnw_show/show/env12.gif') %>",0,1);
|
168
|
+
gBacks[14]=new Back(new Position(10,10,800,210) , "<%= asset_path('wnw_show/show/kirakira2.gif') %>",255,1);
|
169
|
+
gBacks[15]=new Back(new Position(430,148,995,563) , topImageUrl ,1,1);
|
170
|
+
gBacks[16]=new Back(new Position(30,480,300,300) , logoUrl ,255,0.7);
|
171
|
+
loadStep1();
|
172
|
+
};
|
173
|
+
|
174
|
+
//背景画像がロードできるまで待つ
|
175
|
+
function loadStep1(){
|
176
|
+
var _finishLoad = true;
|
177
|
+
$.each(gBacks,function(){
|
178
|
+
if (!(this.isLoad())){
|
179
|
+
_finishLoad = false;
|
180
|
+
log("NG:" + this.src );
|
181
|
+
}else{
|
182
|
+
log("OK:" + this.src );
|
183
|
+
}
|
184
|
+
});
|
185
|
+
|
186
|
+
if(_finishLoad){
|
187
|
+
log("loaded");
|
188
|
+
loadStep2();
|
189
|
+
}else{
|
190
|
+
log("wait");
|
191
|
+
setTimeout(loadStep1,1000);
|
192
|
+
}
|
193
|
+
};
|
194
|
+
|
195
|
+
//キラキラ表示
|
196
|
+
function loadStep2(){
|
197
|
+
gBacks[0].show(); // 背景
|
198
|
+
gBacks[14].show(); // キラキラ
|
199
|
+
setTimeout(loadStep3,ANIME_SPAN);
|
200
|
+
};
|
201
|
+
|
202
|
+
//封筒がふわっと現れるアニメーション
|
203
|
+
function loadStep3(){
|
204
|
+
gBacks[1].show();
|
205
|
+
gBacks[4].show();
|
206
|
+
gBacks[7].show();
|
207
|
+
gBacks[13].show();
|
208
|
+
setTimeout(loadStep5,ANIME_SPAN);
|
209
|
+
};
|
210
|
+
|
211
|
+
//封筒がふわっと現れるアニメーション
|
212
|
+
function loadStep5(){
|
213
|
+
gBacks[2].show();
|
214
|
+
gBacks[3].show();
|
215
|
+
gBacks[5].show();
|
216
|
+
gBacks[6].show();
|
217
|
+
gBacks[9].show();
|
218
|
+
// gBacks[8].show();
|
219
|
+
setTimeout(loadStep6,ANIME_SPAN);
|
220
|
+
};
|
221
|
+
|
222
|
+
//写真がふわっと現れるアニメーション
|
223
|
+
function loadStep6(){
|
224
|
+
gBacks[15].show();//写真
|
225
|
+
setTimeout(loadStep7,ANIME_SPAN);
|
226
|
+
};
|
227
|
+
|
228
|
+
//文字表示
|
229
|
+
function loadStep7(){
|
230
|
+
typeCharDiv = $("<div />")
|
231
|
+
.attr("id","str_div")
|
232
|
+
.css({
|
233
|
+
"color":"#B8860B",
|
234
|
+
// "text-shadow": "0px 0px 10px white",
|
235
|
+
"top":570,
|
236
|
+
"left":450,
|
237
|
+
"font-size":30,
|
238
|
+
// "font-weight": "bold",
|
239
|
+
"width":1000,
|
240
|
+
"opacity": 1,
|
241
|
+
"position":"absolute",
|
242
|
+
"z-index":255,
|
243
|
+
"font-family": "wnw_show_font",
|
244
|
+
"padding":10
|
245
|
+
});
|
246
|
+
$("body").append(typeCharDiv);
|
247
|
+
loadStep8(0);
|
248
|
+
|
249
|
+
setTimeout(loadStep9,PHOTO_SPAN);
|
250
|
+
|
251
|
+
};
|
252
|
+
|
253
|
+
//文字表示のサブ関数。一文字づつ描画
|
254
|
+
function loadStep8(counter){
|
255
|
+
if (counter > typeCharMessage.length){
|
256
|
+
typeCharDiv.html(typeCharMessage);
|
257
|
+
}else if(typeCharMessage.charAt(counter) == '/'){
|
258
|
+
setTimeout(loadStep8, TYPE_CHAR_NL_TIME, counter+1);
|
259
|
+
}else{
|
260
|
+
$("#str_div").html(typeCharMessage.substring(0,counter)+TYPE_CHAR_CURSOLE);
|
261
|
+
setTimeout(loadStep8,TYPE_CHAR_SPEED,counter+1);
|
262
|
+
}
|
263
|
+
};
|
264
|
+
|
265
|
+
function loadStep9(){
|
266
|
+
typeCharDiv.animate({"opacity":0},FADEIN_TIME);
|
267
|
+
gBacks[15].hide();//写真
|
268
|
+
gBacks[16].show();//ロゴ表示
|
269
|
+
gBacks[10].show();
|
270
|
+
gBacks[11].show();
|
271
|
+
gBacks[12].show();
|
272
|
+
|
273
|
+
callbackFunction();
|
274
|
+
};
|
275
|
+
|
276
|
+
//public関数の定義
|
277
|
+
wnw.show.InitAnime.start = start;
|
278
|
+
|
279
|
+
})();
|
280
|
+
|
281
|
+
//-------------------------------------------------------
|
282
|
+
//wnw.show.Sliderライブラリ
|
283
|
+
//-------------------------------------------------------
|
284
|
+
if (!wnw.show.Slider) wnw.show.Slider = {};
|
285
|
+
(function(){
|
286
|
+
function log(str){
|
287
|
+
console.log("[wnw.show.Slider] " + str);
|
288
|
+
}
|
289
|
+
|
290
|
+
// コンテナクラス
|
291
|
+
function Container(imgJq,posi,name){
|
292
|
+
this.imgJq=imgJq;
|
293
|
+
this.name = name;
|
294
|
+
var fitPosi=fit(posi,this.imgJq.width(),this.imgJq.height());
|
295
|
+
fitPosi.next=posi.next;
|
296
|
+
this.posi=fitPosi;
|
297
|
+
this.imgJq.css({"position":"absolute",
|
298
|
+
"top" : fitPosi.top,
|
299
|
+
"left" : fitPosi.left,
|
300
|
+
"width" : fitPosi.width
|
301
|
+
});
|
302
|
+
this.fadeinFlag=false; //次にフェードインするかどうか
|
303
|
+
this.moveFlag=false; //次に移動するかどうか
|
304
|
+
this.fadeoutFlag=false; //次にフェードアウトするかどうか
|
305
|
+
this.nextDeleteFlag=false; //次に削除されるかどうか
|
306
|
+
}
|
307
|
+
Container.prototype.setPosi = function(posi){
|
308
|
+
var fitPosi=fit(posi,this.imgJq.width(),this.imgJq.height());
|
309
|
+
fitPosi.next=posi.next;
|
310
|
+
this.posi=fitPosi;
|
311
|
+
this.imgJq.css({"position":"absolute",
|
312
|
+
"top" : fitPosi.top,
|
313
|
+
"left" : fitPosi.left,
|
314
|
+
"width" : fitPosi.width
|
315
|
+
});
|
316
|
+
};
|
317
|
+
Container.prototype.toString = function(){
|
318
|
+
var _str = this.name + ": ";
|
319
|
+
if(this.fadeinFlag){
|
320
|
+
_str += "fade in :";
|
321
|
+
}
|
322
|
+
if(this.moveFlag){
|
323
|
+
_str += "move :";
|
324
|
+
}
|
325
|
+
if(this.fadeoutFlag){
|
326
|
+
_str += "fade out:";
|
327
|
+
}
|
328
|
+
if(this.nextDeleteFlag){
|
329
|
+
_str += "next del:";
|
330
|
+
}
|
331
|
+
return _str + this.imgJq.attr("src");
|
332
|
+
};
|
333
|
+
//コンテナクラスここまで
|
334
|
+
|
335
|
+
//枠の中にwidth*heightの画像をフィットさせた場合の位置を返す関数
|
336
|
+
function fit(wakuPosi,width,height){
|
337
|
+
if(wakuPosi==null){
|
338
|
+
return null;
|
339
|
+
}else{
|
340
|
+
if(wakuPosi.width / width > wakuPosi.height / height ){
|
341
|
+
var rate=wakuPosi.height / height;
|
342
|
+
}else{
|
343
|
+
var rate=wakuPosi.width / width;
|
344
|
+
}
|
345
|
+
var top = wakuPosi.top+ (wakuPosi.height - rate * height)/2;
|
346
|
+
var left = wakuPosi.left+ (wakuPosi.width - rate * width)/2;
|
347
|
+
return new Position(parseInt(left),
|
348
|
+
parseInt(top),
|
349
|
+
parseInt(left + rate * width),
|
350
|
+
parseInt(top + rate * height));
|
351
|
+
}
|
352
|
+
}
|
353
|
+
//アニメーション更新間隔[msec]
|
354
|
+
var KOMA_TIME=100;
|
355
|
+
//フィードの時間 [msec]
|
356
|
+
var FADE_TIME=2500;
|
357
|
+
//画像切り替え間隔 [msec]
|
358
|
+
var IMAGE_CHANGE_TIME=15000;
|
359
|
+
//画像処理の開始時間の揺らぎの最大値[msec]
|
360
|
+
var SQEW_SPAN=1000;
|
361
|
+
// 位置
|
362
|
+
var gPosiList = new Array();
|
363
|
+
gPosiList[0]=new Position(61,385,178,495);
|
364
|
+
gPosiList[1]=new Position(277,349,392,435);
|
365
|
+
gPosiList[2]=new Position(430,138,995,563);
|
366
|
+
gPosiList[3]=new Position(1024,337,1135,433);
|
367
|
+
gPosiList[4]=new Position(234,203,356,302);
|
368
|
+
gPosiList[5]=new Position(679,83,760,136);
|
369
|
+
gPosiList[6]=new Position(885,40,992,117);
|
370
|
+
gPosiList[7]=new Position(125,615,259,680);
|
371
|
+
gPosiList[8]=new Position(279,521,374,597);
|
372
|
+
gPosiList[9]=new Position(458,602,546,651);
|
373
|
+
gPosiList[10]=new Position(602,569,688,641);
|
374
|
+
gPosiList[11]=new Position(801,576,917,672);
|
375
|
+
gPosiList[12]=new Position(968,641,1070,740);
|
376
|
+
//画像の位置
|
377
|
+
var gImgPosiList = new Array();
|
378
|
+
gImgPosiList[0]=gPosiList[6].clone();
|
379
|
+
gImgPosiList[1]=new Position(450,158,975,543);
|
380
|
+
gImgPosiList[2]=gPosiList[11].clone();
|
381
|
+
gImgPosiList[3]=gPosiList[12].clone();
|
382
|
+
gImgPosiList[4]=gPosiList[4].clone();
|
383
|
+
gImgPosiList[5]=gImgPosiList[1].clone();
|
384
|
+
gImgPosiList[6]=gPosiList[3].clone();
|
385
|
+
//既存画像初期位置
|
386
|
+
var OLD_IMAGE_START_POSI = 0;
|
387
|
+
//既存画像の遷移順序
|
388
|
+
gImgPosiList[0].next = gImgPosiList[1];
|
389
|
+
gImgPosiList[1].next = gImgPosiList[2];
|
390
|
+
gImgPosiList[2].next = gImgPosiList[3];
|
391
|
+
gImgPosiList[3].next = null;
|
392
|
+
//新規画像初期位置
|
393
|
+
var NEW_IMAGE_START_POSI = 4;
|
394
|
+
//新規画像の遷移順序
|
395
|
+
//gImgPosiList[4].next = gImgPosiList[5];
|
396
|
+
//gImgPosiList[5].next = gImgPosiList[6];
|
397
|
+
//gImgPosiList[6].next = null;
|
398
|
+
gImgPosiList[4].next = gImgPosiList[1];
|
399
|
+
//コンテナのリスト
|
400
|
+
var gConList = new Array();
|
401
|
+
//既存画像 jquery objキュー
|
402
|
+
var gOldImgJqQueue = new Queue();
|
403
|
+
//新規画像 jquery objキュー
|
404
|
+
var gNewImgJqQueue = new Queue();
|
405
|
+
|
406
|
+
//既存画像追加
|
407
|
+
function addOldImg(url){
|
408
|
+
$("body").append(
|
409
|
+
$("<img />")
|
410
|
+
.attr("src", url)
|
411
|
+
.css({"opacity":0,"z-index":1})
|
412
|
+
.load(function(){
|
413
|
+
log("既存キューに追加 " + $(this).attr("src") + " size :" + $(this).width());
|
414
|
+
gOldImgJqQueue.enqueue($(this));
|
415
|
+
})
|
416
|
+
);
|
417
|
+
}
|
418
|
+
|
419
|
+
//新規画像追加
|
420
|
+
function addNewImg(url){
|
421
|
+
$("body").append(
|
422
|
+
$("<img />")
|
423
|
+
.attr("src", url)
|
424
|
+
.css({"opacity":0,"z-index":1})
|
425
|
+
.load(function(){
|
426
|
+
log("新規キューに追加 " + $(this).attr("src") + " size :" + $(this).width());
|
427
|
+
gNewImgJqQueue.enqueue($(this));
|
428
|
+
})
|
429
|
+
);
|
430
|
+
}
|
431
|
+
|
432
|
+
// メインループ
|
433
|
+
function start(){
|
434
|
+
for ( i = 0 ; i < gConList.length ; i++){
|
435
|
+
var _con = gConList[i];
|
436
|
+
log("コンテナNo" + i + ":" + _con.toString());
|
437
|
+
}
|
438
|
+
|
439
|
+
//古いコンテナの削除
|
440
|
+
for ( i = 0 ; i < gConList.length ; i++){
|
441
|
+
if(gConList[i].nextDeleteFlag){
|
442
|
+
log("既存キューに追加 " + gConList[i].imgJq.attr("src") );
|
443
|
+
gOldImgJqQueue.enqueue(gConList[i].imgJq);
|
444
|
+
log("古いコンテナ削除");
|
445
|
+
gConList.splice(i,1);
|
446
|
+
}
|
447
|
+
}
|
448
|
+
|
449
|
+
if( gNewImgJqQueue.size() ==0){
|
450
|
+
//新規キューに画像はない
|
451
|
+
if( gOldImgJqQueue.size() ==0){
|
452
|
+
//既存キューにも新規キューにも画像がない
|
453
|
+
log("既存キューにも新規キューにも画像がない");
|
454
|
+
}else{
|
455
|
+
//既存キューに画像あり
|
456
|
+
if(gImgPosiList[OLD_IMAGE_START_POSI].div == null &&
|
457
|
+
gImgPosiList[NEW_IMAGE_START_POSI].div == null){
|
458
|
+
log("既存キューに画像あり");
|
459
|
+
var _img = gOldImgJqQueue.dequeue();
|
460
|
+
log("既存キューから取得 " + _img.attr("src"));
|
461
|
+
//コンテナを作り、画像と場所をセットする
|
462
|
+
var _con = new Container(_img ,gImgPosiList[OLD_IMAGE_START_POSI],"old");
|
463
|
+
//フェードインフラグをたてる
|
464
|
+
_con.fadeinFlag=true;
|
465
|
+
//コンテナリストに追加
|
466
|
+
gConList.push(_con);
|
467
|
+
}
|
468
|
+
}
|
469
|
+
}else{
|
470
|
+
//新規キューに画像あり
|
471
|
+
if(gImgPosiList[NEW_IMAGE_START_POSI].div == null){
|
472
|
+
log("新規キューに画像あり");
|
473
|
+
var _img = gNewImgJqQueue.dequeue();
|
474
|
+
log("新規キューから取得 " + _img.attr("src"));
|
475
|
+
//コンテナを作り、画像と場所をセットする
|
476
|
+
var _con = new Container(_img, gImgPosiList[NEW_IMAGE_START_POSI],"new");
|
477
|
+
//フェードインフラグをたてる
|
478
|
+
_con.fadeinFlag=true;
|
479
|
+
//コンテナリストに追加
|
480
|
+
gConList.push(_con);
|
481
|
+
//鳥登場
|
482
|
+
wnw.show.Tori.fly();
|
483
|
+
}
|
484
|
+
}
|
485
|
+
//log(gConList);
|
486
|
+
|
487
|
+
//性能向上のため、アニメをする前にpositionのキャッシュを作っておく
|
488
|
+
cachedFromPosiList = new Array();
|
489
|
+
cachedNextPosiList = new Array();
|
490
|
+
for(i=0;i<gConList.length;i++){
|
491
|
+
cachedFromPosiList[i]=gConList[i].posi;
|
492
|
+
cachedNextPosiList[i]=fit(gConList[i].posi.next,
|
493
|
+
gConList[i].imgJq.width(),
|
494
|
+
gConList[i].imgJq.height());
|
495
|
+
}
|
496
|
+
//アニメ開始
|
497
|
+
komaLoop(0);
|
498
|
+
//次のループへ
|
499
|
+
setTimeout(start, IMAGE_CHANGE_TIME);
|
500
|
+
//鳥のテスト用
|
501
|
+
//wnw.show.Tori.fly();
|
502
|
+
|
503
|
+
}
|
504
|
+
|
505
|
+
var cachedFromPosiList;
|
506
|
+
var cachedNextPosiList;
|
507
|
+
|
508
|
+
function komaLoop(t){
|
509
|
+
var r = (t - 0.3) / (0.7 - 0.3);
|
510
|
+
//透明度が中途半端にならないよう丸める
|
511
|
+
if(r>0.95){r=1;}
|
512
|
+
var fadeoutTime=1-(t-0)/(0.4 - 0);
|
513
|
+
if(fadeoutTime<0.05){fadeoutTime=0;}
|
514
|
+
var fadeinTime=(t-0.6)/(1 - 0.6);
|
515
|
+
if(fadeinTime>0.95){fadeinTime=1;}
|
516
|
+
for(i=0;i<gConList.length;i++){
|
517
|
+
var div=gConList[i];
|
518
|
+
if(0 <= t && t <= 0.4 ){
|
519
|
+
if(div.moveFlag || div.fadeoutFlag ){
|
520
|
+
div.imgJq.css({"opacity": fadeoutTime});
|
521
|
+
}
|
522
|
+
}
|
523
|
+
if(0.6 <= t && t <= 1 ){
|
524
|
+
if(div.moveFlag || div.fadeinFlag ){
|
525
|
+
div.imgJq.css({"opacity": fadeinTime});
|
526
|
+
}
|
527
|
+
}
|
528
|
+
if(0.3 <= t && t<= 0.4 || 0.6 <= t && t<= 0.7){
|
529
|
+
if(div.moveFlag){
|
530
|
+
var fromPosi = cachedFromPosiList[i];
|
531
|
+
var toPosi = cachedNextPosiList[i];
|
532
|
+
div.imgJq.css({"top":r * toPosi.top + (1-r) * fromPosi.top,
|
533
|
+
"left":r * toPosi.left + (1-r) * fromPosi.left,
|
534
|
+
"width":r * toPosi.width + (1-r) * fromPosi.width
|
535
|
+
});
|
536
|
+
}
|
537
|
+
}
|
538
|
+
}
|
539
|
+
if(t<1){
|
540
|
+
t += 0.02 ;
|
541
|
+
// setTimeout("wnw.show.Slider.komaLoop(" + t + ")", 100);
|
542
|
+
setTimeout(function(){komaLoop(t);}, 100);
|
543
|
+
}else{
|
544
|
+
//アニメーション終了。フラグ更新
|
545
|
+
for(i=0;i<gConList.length;i++){
|
546
|
+
var _con=gConList[i];
|
547
|
+
if(_con.fadeoutFlag){
|
548
|
+
_con.fadeoutFlag=false;
|
549
|
+
_con.nextDeleteFlag=true;
|
550
|
+
}else if(_con.fadeinFlag){
|
551
|
+
_con.fadeinFlag=false;
|
552
|
+
_con.moveFlag=true;
|
553
|
+
}else if(_con.moveFlag){
|
554
|
+
//positionを進める
|
555
|
+
_con.setPosi(_con.posi.next);
|
556
|
+
_con.moveFlag=false;
|
557
|
+
if(_con.posi.next != null){
|
558
|
+
// 次が終わりじゃない場合は、moveのフラグを立てる
|
559
|
+
_con.moveFlag=true;
|
560
|
+
}else{
|
561
|
+
// 次が終わりの場合は、fadeoutのフラグを立てる
|
562
|
+
_con.fadeoutFlag=true;
|
563
|
+
}
|
564
|
+
}
|
565
|
+
}
|
566
|
+
}
|
567
|
+
}
|
568
|
+
|
569
|
+
//publicフィールド・関数定義
|
570
|
+
wnw.show.Slider.start = start;
|
571
|
+
wnw.show.Slider.addOldImg = addOldImg;
|
572
|
+
wnw.show.Slider.addNewImg = addNewImg;
|
573
|
+
|
574
|
+
})();
|
575
|
+
|
576
|
+
//---------------------------------------------
|
577
|
+
// wnw.show.Toriライブラリ
|
578
|
+
//---------------------------------------------
|
579
|
+
if (!wnw.show.Tori) wnw.show.Tori = {};
|
580
|
+
(function(){
|
581
|
+
//定数
|
582
|
+
|
583
|
+
//アニメーション更新間隔[msec]
|
584
|
+
var KOMA_TIME=100;
|
585
|
+
//変数
|
586
|
+
var toriElement;
|
587
|
+
var already_init = false;
|
588
|
+
//音楽再生
|
589
|
+
function playSound(){
|
590
|
+
//鳥の鳴き声
|
591
|
+
var swfURL = "<%= asset_path 'wnw_show/show/SoundUnit.swf' %>";
|
592
|
+
var div = document.getElementById("SoundUnit");
|
593
|
+
var innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="0" height="0" id="SoundUnit"><param name="movie" value="' + swfURL + '" /><embed src="' + swfURL + '" width="0" height="0" name="SoundUnit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
|
594
|
+
div.innerHTML = innerHTML;
|
595
|
+
}
|
596
|
+
|
597
|
+
function fly(){
|
598
|
+
//トリ画像
|
599
|
+
var TORI_IMAGE= "<%= asset_path('wnw_show/show/tori.png') %>";
|
600
|
+
var NULL_IMAGE = "<%= asset_path('wnw_show/show/null.gif') %>";
|
601
|
+
if (already_init == false){
|
602
|
+
$("body")
|
603
|
+
.append($("<img/>")
|
604
|
+
.attr("src",NULL_IMAGE)
|
605
|
+
.attr("id","tori"))
|
606
|
+
.append($("<div />")
|
607
|
+
.attr("id","SoundUnit"));
|
608
|
+
already_init = true;
|
609
|
+
}
|
610
|
+
|
611
|
+
//鳥初期化
|
612
|
+
var tori = new Image();
|
613
|
+
tori.src = TORI_IMAGE;
|
614
|
+
toriElement=document.getElementById("tori");
|
615
|
+
toriElement.src = tori.src;
|
616
|
+
toriElement.style.position = "absolute";
|
617
|
+
toriElement.style.zIndex = 255;
|
618
|
+
toriElement.style.top = -30;
|
619
|
+
toriElement.style.left = -350;
|
620
|
+
toriElement.style.width = 400;
|
621
|
+
toriElement.style.height = 400;
|
622
|
+
|
623
|
+
//playSound();
|
624
|
+
komaAnime(0);
|
625
|
+
}
|
626
|
+
function komaAnime(t){
|
627
|
+
t++;
|
628
|
+
if(t == 30 || t == 50){
|
629
|
+
playSound();
|
630
|
+
}
|
631
|
+
if(0<t && t <= 25){
|
632
|
+
toriElement.style.left = -350+t*10;
|
633
|
+
toriElement.style.top = -30-t*t*0.1;
|
634
|
+
}else if(25 < t && t <= 50){
|
635
|
+
;
|
636
|
+
}else if(50 < t && t <= 75){
|
637
|
+
toriElement.style.left = -350+(t-25)*10;
|
638
|
+
toriElement.style.top = -30-(t-25)*(t-25)*0.1;
|
639
|
+
}
|
640
|
+
setTimeout(function(){komaAnime(t);}, KOMA_TIME);
|
641
|
+
}
|
642
|
+
|
643
|
+
//publicフィールド・関数定義
|
644
|
+
wnw.show.Tori.fly = fly;
|
645
|
+
|
646
|
+
})();
|