wnw_show 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
+
})();
|