謎のパラパラ漫画ライブラリ。無駄にES3仕様。
謎のパラパラ漫画ライブラリ。無駄にES3仕様。
var SwfPlayer=function(){
"use strict";
var pvt=0;
var _player="#"+(++pvt);
var _frames="#"+(++pvt);
var _jumpURL="#"+(++pvt);
var _i="#"+(++pvt);
var _isAuto="#"+(++pvt);
var _isEnded="#"+(++pvt);
var _makeImgs="#"+(++pvt);
var _setFrame="#"+(++pvt);
var _auto="#"+(++pvt);
var _ready="#"+(++pvt);
var _end="#"+(++pvt);
var _playing="#"+(++pvt);
var _next="#"+(++pvt);
function SwfPlayer(id,startFrame,endFrame,frames,jumpURL){
this[_player]=document.getElementById(id);
this[_frames]=frames.slice();
if(startFrame!==null) this[_frames].unshift([startFrame,0]);
if(endFrame!==null) this[_frames].push([endFrame,0]);
this[_makeImgs]();
this[_jumpURL]=jumpURL||null;
this[_ready]();
};
var $=SwfPlayer.prototype;
$[_makeImgs]=function(){
var div=this[_player];
div.style.display="inline-block";
div.style.position="relative";
var addImg=function(path,isFirst){
if(document.getElementById(path)!=null) return;
div.insertAdjacentHTML("beforeEnd",
'<img id="'+path+'" src="'+path+'" style="'
+(isFirst? "": "position:absolute;")
+"visibility:hidden;"
+"left:0px;top:0px;"
+'">');
};
for(var i=0;i<this[_frames].length;i++){
addImg(this[_frames][i][0],i==0);
}
}
$[_setFrame]=function(frame){
document.getElementById(frame).style.visibility="visible";
var imgs=this[_player].childNodes;
setTimeout(function(){
for(var i=0;i<imgs.length;i++){
if(imgs[i].id==frame) continue;
imgs[i].style.visibility="hidden";
}
},1);
}
$[_auto]=function(isAuto){
this[_isAuto]=isAuto;
this[_player].style.cursor=isAuto? "": "pointer";
};
$[_ready]=function(){
this[_i]=0;
this[_isEnded]=false;
this[_next]();
};
$[_end]=function(){
this[_isEnded]=true;
this[_next]();
};
$[_playing]=function(me){
var img=0;
var ms=1;
if(me[_frames].length<=me[_i]) return me[_end]();
var frame=me[_frames][me[_i]];
this[_setFrame](frame[img]);
me[_auto](0<frame[ms]);
me[_i]++;
if(me[_isAuto]){
setTimeout(function(){
me[_playing](me);
},
frame[ms]);
}
};
$[_next]=function(){
if(this[_isEnded]){
if(this[_jumpURL]===null) return this[_ready]();
return window.open(this[_jumpURL],"_self");
}
this[_playing](this);
};
$.next=function(){
if(this[_isAuto]) return;
this[_next]();
};
return SwfPlayer;
}();
/*
こんな感じで使うよ!
<html>
<body>
<div id="swf" onclick="swf.next()"></div>
<!--[SwfPlayerオブジェクト].next()で発火-->
<script src="SwfPlayer.js"></script>
<!--SwfPlayerライブラリ(事前に読込む必要あり)-->
<script>
var f=80;//1フレーム当たりの時間[ms]
var swf=new SwfPlayer(
"swf", //対象となるimg要素のid名
"flashstart.PNG", //スタート画面となる画像。nullの時自動で再生開始される。
"flashend.PNG", //エンド画面となる画像。nullの時自動でスタート画面に戻る。
//以下再生されるイメージの配列
//1画像の情報は[画像パス,画像当たりの再生時間]
//(画像当たりの再生時間=0 の時、クリックで移動になる)
[
["000.png",f*10],
["001.png",f*30],
["002.png",f*30],
["003.png",f*40],
["004.png",f*25],
["005.png",f*20]
],
"http://yosgspec.web.fc2.com/" //終了時にリプレイしないでジャンプする場合URLを入力。
);
</script>
</body>
</html>
*/