ミラーパノラマ
一枚のパノラマ写真を準備すれば、「正像」+「鏡像」+「正像」+「鏡像」と自動的に生成し連結して、エンドレスパノラマを実現します。 (デモの写真はHeroさんから借用)



<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Script-Type" content="text/JavaScript"> <TITLE>ミラーパノラマ</TITLE> <SCRIPT language="javascript"> <!-- //写真 syasin="./a01.jpg";//写真ファイル名 tp=100; //写真を表示する縦位置 //ユーザー環境 nav=navigator.appName.substring(0,1);//ブラウザ scr_l=screen.width; //ディスプレーの横幅 scr_h=screen.height; //ディスプレーの縦幅 roll_l=scr_l*2; ///スクロール初期設定/// x=10; //スタート位置 rl=1; //スクロールスピード ///アニメ初期設定/// bx=1; //スピード bxx=150;byy=120; //スタート位置 imgurl2="./mm02.gif"; //右向きイメージ imgurl3="./mm01.gif"; //左向きイメージ sy=0; ///画面の動き/// function mv(){ ///スクロール/// x=x+rl; if(x>roll_l+10){x=10;} //右スクロールをエンドレスに if(x<10){x=roll_l+10;} //左スクロールをエンドレスに document.getElementById("hekiga").style.top = tp ; document.getElementById("hekiga").style.left =x*-1 ; ///アニメの動き/// scr_l=document.body.clientWidth;//ウィンドウの幅 if(bxx>scr_l-50){ //右端で反転 bx=-4; document.ball.src = imgurl3; } if(bxx<5){ //左端で反転 bx=4; document.ball.src = imgurl2; } document.getElementById("qpon").style.top = byy; document.getElementById("qpon").style.left =bxx; bxx=bxx+bx; //上下動 sy=sy+0.3; by=4*Math.sin(sy); byy=byy+by; tim2=setTimeout("mv()",50); } //アニメで静止 function stp(){ clearTimeout(tim2); } //アニメで再開 function go(){ tim2=setTimeout("mv()",50); } //ボタンで切り替え// function xy(c){ rl=c; } //--> </SCRIPT> </HEAD> <BODY onload="mv();"> <script type = "text/javascript"> <!--
//写真 document.writeln('<div id="hekiga" style="position:absolute;top:',tp,';left:0">'); document.writeln('<table border=10 width=',scr_l*3,' height=10><tr><td>'); document.writeln('<table border=0 cellspacing=0 cellpadding=0><tr>'); document.writeln('<td><img src="',syasin,'" width=',scr_l,' name="img1"></td>'); document.writeln('<td><img src="',syasin,'" width=',scr_l); if(nav=="M"){ document.writeln(' style="filter:flipH(enabled=1) flipV(enabled=0);">'); }else{ document.writeln(' style="transform: rotateY( 180deg );-webkit-transform: rotateY(180deg);">'); } document.writeln('<td><img src="',syasin,'" width=',scr_l,'></td>'); document.writeln('</td></tr></table></td></tr></table>'); document.writeln('</div>'); ///アニメ document.writeln('<div id="qpon" style="position:absolute"; display="block";>'); document.writeln('<img name="ball" src="',imgurl2,'" onMouseOver="stp()" onMouseOut="go()">'); document.writeln('</div>'); ///ボタン document.writeln('<div id="button" style="position:absolute;top :',(tp+30),';left:10;">'); document.writeln('<form>'); document.writeln('<table>'); document.writeln('<tr><th><input type=button value="<<" onClick="xy(10)"></th></tr>'); document.writeln('<tr><th><input type=button value="←" onClick="xy(2)"></th></tr>'); document.writeln('<tr><th><input type=button value="×" onClick="xy(0)"></th></tr>'); document.writeln('<tr><th><input type=button value="→" onClick="xy(-2)"></th></tr>'); document.writeln('<tr><th><input type=button value=">>" onClick="xy(-10)"></th></tr>'); document.writeln('</table>'); document.writeln('</form>'); document.writeln('</div>'); //--> </script> </center> </BODY> </HTML>
ソースをお使いの場合は出来るだけ私のホームページにリンクを貼ってください。
URL:http://www2a.biglobe.ne.jp/~qpon/    バナー:還暦QPON