HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

3回転ジャンプ

　

　

　

　

　

　

　

　

　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var dy; //Topの移動量
var m;
var dm;
var timer1,timer2,timer3,timerSP;

function Init(){ //画像の初期化
  PIC.style.filter = "fliph()"; //左右反転ﾌｨﾙﾀ
  PIC.style.pixelTop = 200; 
  PIC.style.pixelLeft = 0;
  dy = 15;
}

function Kaiten(n){ 
  Init();
  if(n == 3){
    m = 0.2
    dm = 0.2;
    Kaiten1();
  }
  if(n == 10){
    m = 0.1;
    dm = 0.1;
    Kaiten10();
  }
}

function Kaiten1(){
  if(PIC.style.pixelLeft < 100){
    PIC.style.pixelLeft += 5;
    timer1 = setTimeout("Kaiten1()",20);
  }else{
    clearTimeout(timer1);
    Kaiten2();
  }
}

function Kaiten2(){
  if(PIC.style.pixelTop <= 200){
    PIC.style.pixelLeft += 10;
    PIC.style.pixelTop -= dy;
    dy = dy - dm;
    dm = dm + m; //時関経過とともにmづつ増加 
    if(PIC.style.pixelLeft==150)PIC.style.filter="";
    if(PIC.style.pixelLeft==180)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==210)PIC.style.filter="";
    if(PIC.style.pixelLeft==240)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==270)PIC.style.filter="";
    if(PIC.style.pixelLeft==300)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==320)PIC.style.filter="";

    timer2 = setTimeout("Kaiten2()",100);
  }else{ //着地したら
    clearTimeout(timer2);
    Kaiten3();
  }
}

function Kaiten3(){
  if(PIC.style.pixelLeft < 350){
    PIC.style.pixelLeft += 4;
    timer3 = setTimeout("Kaiten3()",10);
  }else{
    clearTimeout(timer3);
  }
}

function Kaiten10(){
  if(PIC.style.pixelLeft < 50){
    PIC.style.pixelLeft += 5;
    setTimeout("Kaiten10()",20);
  }else if(PIC.style.pixelLeft >= 50 
            && PIC.style.pixelTop <= 200){
    PIC.style.pixelLeft += 10;
    PIC.style.pixelTop -= dy;
    dy = dy - dm;
    dm = dm + m; //時関経過とともにmづつ増加 
    if(PIC.style.pixelLeft==70)PIC.style.filter="";
    if(PIC.style.pixelLeft==90)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==110)PIC.style.filter="";
    if(PIC.style.pixelLeft==130)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==150)PIC.style.filter="";
    if(PIC.style.pixelLeft==170)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==190)PIC.style.filter="";
    if(PIC.style.pixelLeft==210)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==230)PIC.style.filter="";
    if(PIC.style.pixelLeft==250)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==270)PIC.style.filter="";
    if(PIC.style.pixelLeft==300)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==320)PIC.style.filter="";
    if(PIC.style.pixelLeft==340)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==360)PIC.style.filter="";
    if(PIC.style.pixelLeft==380)PIC.style.filter="fliph()";
    if(PIC.style.pixelLeft==4000)PIC.style.filter="";

    timerSP = setTimeout("Kaiten10()",80);
  }else{
    clearTimeout(timerSP);
  }
}
//--></script>
</head>

<body onload="Init();">
<button onclick="Kaiten(3);">3回転ｼﾞｬﾝﾌﾟ</button>
<button onclick="Kaiten(10);">ｽﾍﾟｼｬﾙ10回転</button> 

<img id="PIC" style="position:absolute;
    width:100;height:150" 
    src="../../java/jadata/pic01.jpg"> 
<hr style="position:absolute;top:350;left:10" 
    width="90%" noshade size="10" color="#804040">

end(最終更新:12/11/12)