アニメーション応用

マウスが重なると動き始める

●とめるテクニックが必要。

<img src="images/n0.png" alt=""
 name="area1"  onMouseOver="anime()" onMouseOut="stopanime()">

var n=5;
var n123890 = "0123456789";
function anime(){
  document.area1.src = "images/n" + n + ".png";
  n = n + 1;
  if ( n > 9 ) { n = 0;}
  ani1timer = setTimeout("anime()",1);
}
function stopanime(){
  clearTimeout(ani1timer);
}

マウスが重なると動き始めるリンク

いぬ
ねこ
かもめ
はと

<a class=sb href="doubutsu/inu.html"
 onMouseOver="btnfl('btnf1')" onMouseOut="stopbtnfl('btnf1')">
<img src="images/blue.gif" alt="" border=0 name="btnf1" >いぬ</a><br>

fl = 0;
function btnfl(Bname){
  if ( fl == 0 ){
     document[Bname].src = "images/skyblue.gif";
     fl = 1;
  }else if( fl == 1 ){
     document[Bname].src = "images/blue.gif";
     fl = 0;
  }
  dm = Bname;
  fltimer = setTimeout("btnfl(dm)",50);
}
function stopbtnfl(Bname){
  clearTimeout(fltimer);
  document[Bname].src = "images/blue.gif";
}

スロットマシン

<p class=ni>
<img src="images/nst.png" alt=""
 name="area_s"  onclick="startabc('start')">
　　　　
<img src="images/n0.png" alt=""
 name="area_a"  onclick="stp('a')">
<img src="images/n0.png" alt=""
 name="area_b"  onclick="stp('b')">
<img src="images/n0.png" alt=""
 name="area_c"  onclick="stp('c')">
</p>

working=false; bns=0;
na=0; nb=0; nc=0;
sa=-1;sb=-1;sc=-1;
function startabc(state){
  if (state == 'start' && working ){
    return
  }
  if (state == 'start'){
    document.area_s.src = "images/nof.png";
  }
    working = true;
    if ( sa < 0 ){
       na = na + 1;
       if ( na > 9 ) { na = 0; }
       document.area_a.src = "images/n" + na + ".png";
       }
    if ( sb < 0 ){
       nb = nb + 1;
       if ( nb > 9 ) { nb = 0; }
       document.area_b.src = "images/n" + nb + ".png";
       }
    if ( sc < 0 ){
       nc = nc + 1;
       if ( nc > 9 ) { nc = 0; }
       document.area_c.src = "images/n" + nc + ".png";
       }
  abctimer = setTimeout("startabc('cont')",1);
}
function stp(X){
  if ( working ){
    if (X=='a'){
       sa = na;
    }else if(X=='b'){
       sb = nb;
    }else if(X=='c'){
       sc = nc;
    }
    if (sa>-1 && sb>-1 && sc>-1){
       if (sa == sb && sb == sc){
          // omedetou
             reset();
       }else if (bns==0){
          if (sa == sb && bns ==0){sc=-1; bns=1;}
          if (sb == sc && bns ==0){sa=-1; bns=1;}
          if (sc == sa && bns ==0){sb=-1; bns=1;}
          if (sa>-1 && sb>-1 && sc>-1){
             reset();
          }
       }else{
          reset();
       }
    }
  }
}
function reset(){
       clearTimeout(abctimer);
       sa=-1;sb=-1;sc=-1;
       working=false;
       bns = 0;
       document.area_s.src = "images/nst.png";
}