謎のパラパラ漫画ライブラリ。無駄に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> */