Aircraft scrolling(DHTML/DaynamicPotition)

◆AircraftFlying.jsファイル◆

<!--
//----------------------------------------------------------------------------
//ご注意：
//このソフトウェアはオープンソース＆フリーウェアです。
//すべての著作権は作者にありますが、
//自由に再利用、再配布等をしていただいて、結構です。
//#ご利用になった場合には、ご一報頂けるとうれしいです。
//ただし、このソフトウェアを商行為にはお使いにならないで下さい。
//尚、利用、改良、再配布によって生じたいかなる損害をも
//作者は一切、保証いたしません。
//各自の責任の元に、ご利用、改良、再配布して下さい。
//All right reserved by powered author.
//●動作環境：Microsoft社InternetExplorer4.0以降のブラウザ上
//●動作可能OS：UNIX(Soraris),MacOS,Windows3.1,
//              Windows95,WindowsNT4.0
//●作成日：1998/07/21(tue.)
//●更新日：1998/07/21(tue.)Mid night web programming.
//●作成者：Webコンポーネント工房シャーランド（屋号）
//●著作権：Webコンポーネント工房シャーランド
//------------------------------------------------------------------------------
var IntervalID;

function StartPicturMove()
{
	BrowserName=navigator.appName.charAt(0);
	VersionNum=navigator.appVersion.charAt(0);

	//MicrosoftIE4.0でのみ動作するよう、調整。
	if(BrowserName == "M"){
		if(VersionNum >= 4 ){
			IntervalID = 
				window.setInterval("FuncyAnimation()",150);
           }
        }
}

var  LEFTINITAIRCRAFT  = -150;
var  MIDINITAIRCRAFT   =  150;
var  RGHITINITAIRCRAFT =  450;
var  TOPINITAIRCRAFT   =   30;
var  UNDERINITAIRCRAFT =  300;

var  Top      = UNDERINITAIRCRAFT;
var  Left     = MIDINITAIRCRAFT;
var  width    =   0;
var  height   =   0;
var  FaseFlag =   1;

function FuncyAnimation()
{
	AirCraftFlying();

	return;
}

var  WIDTHADD  = 40;
var  HEIGHTADD = 10;

var  UPPERFLYING  = -30;
var  DOWNERFLYING = +30;
var  LEFTDLYING   = +15;

var  TopAdd  = UPPERFLYING ;
var  LeftAdd = LEFTDLYING ;

var  INTERVALMIN   = 1;
var  INTERVALMID   = 2;
var  INTERVALMAX   = 3;

var  FLYINGINTERVAL = INTERVALMID;   

var  MINIFLYINGMODE = 1;
var  MAXFLYINGMODE  = FLYINGINTERVAL*4; 

var  BigFlag  =   1;

function AirCraftFlying()
{
	width  += WIDTHADD ;
    height += HEIGHTADD ;
	Top    += TopAdd ;
	Left   += LeftAdd ;

    if ( width >= 900 ) {
		BigFlag = FlyingModeChage( BigFlag );

		if( BigFlag == MINIFLYINGMODE ) {
		    Top    = UNDERINITAIRCRAFT;
		    Left   = RGHITINITAIRCRAFT;
			TopAdd = UPPERFLYING;
		}
		else if( BigFlag == MINIFLYINGMODE+FLYINGINTERVAL*1 ) { 
		    Top    = UNDERINITAIRCRAFT;
		    Left   = MIDINITAIRCRAFT;
			TopAdd = UPPERFLYING;
		}
		else if( BigFlag == MINIFLYINGMODE+FLYINGINTERVAL*2 ) { 
		    Top    = UNDERINITAIRCRAFT;
		    Left   = LEFTINITAIRCRAFT;
			TopAdd = UPPERFLYING;
		}
		else if( BigFlag == MINIFLYINGMODE+FLYINGINTERVAL*3 ) { 
		    Top    = UNDERINITAIRCRAFT;
		    Left   = MIDINITAIRCRAFT;
			TopAdd = UPPERFLYING;
		}

       	width  = 0;
		height = 0;
    }
	
	if( flyingOkCheck( BigFlag ) == true ){
   		document.all.AnimImg.style.top    = Top;
   		document.all.AnimImg.style.left   = Left;
   		document.all.AnimImg.style.width  = width;
   		document.all.AnimImg.style.height = height;
	}
	
	return;
}

function FlyingModeChage( FlyingMode )
{
	if( FlyingMode < MAXFLYINGMODE ) {
		return( ++FlyingMode );
	}		
	else {
		return( MINIFLYINGMODE );
	}
}

function flyingOkCheck( FlyingMode )
{	
	if( FlyingMode % FLYINGINTERVAL == 1 ) {
		return( true );
	}		
	else {
		return( false );
	}	
}

function StopAnimation()
{    
    window.clearInterval(IntervalID);
}

function StopButtonClicked(){
     StopAnimation();

     document.all.StopButton.style.display  = "none" ;
     document.all.StartButton.style.display = "" ;

}

function StartButtonClicked(){
     StartPicturMove();

     document.all.StopButton.style.display  = "" ;
     document.all.StartButton.style.display = "none" ;

}
// -->
◆AircraftFlying.htmlファイル◆
<html>
<head>
<!-- スタイルシート定義  -->
<link rel=stylesheet  
      type="text/css"  
      href="../../css/ButtonStyle.css"  
      title="ButtonStyle">

<script ID=clientEventHandlersJS 
        language="JavaScript"  
        src="../../js/AircraftFlying.js">
</script>
</head>
<body 
	background="../../jpeg/background/Sky32.jpg"  
    topMargin="0" leftMargin="0"  
    onload="StartPicturMove();">
<img id=AnimImg    
     style="position: absolute; 
			top: 300px; left: 100px; 
			height: 0px; width: 0px; 
			z-index: 4" 
	alt=AirPlane 
	src="../../gif/craft/jal.gif" border=0>

<div style="position:absolute;
            top:190; left:10; 
			width:500; height:330; 
			background-color:none; 
            border:3  solid  LightBlue">

  <input id="StopButton"  
		 type=button 
		 value="アニメーションストップ"  
		 style="position:absolute;
	            top:10; left:320;
				z-index:10"    
		 onmouseOVER="this.className = 'over';" 
         onmouseOUT="this.className = '';" 
         onmouseDOWN="this.className = 'down';" 
         onmouseUP="this.className = 'over';"  
		 onCLICK="StopButtonClicked();">
  <input id="StartButton"  
		 type=button 
		 value="アニメーションスタート"  
		 style="display:none; 
		        position:absolute;
	            top:10; left:320; 
				z-index:10"   
		 onmouseOVER="this.className = 'over';" 
         onmouseOUT="this.className = '';" 
         onmouseDOWN="this.className = 'down';" 
         onmouseUP="this.className = 'over';"  
		 onCLICK="StartButtonClicked();">
</div>
</body>
</html>
◆ButtonStyle.cssファイル◆
.over {color     :yellow; 
       background:navy
}
.down {color     :yellow; 
       background:navy; 
	   font-style:italic
}
Top of Demo Space
Aircraft flying Animation
飛行機飛来アニメーション