【Javascript】クロスブラウザを制する 2-30 不透明度フェイド

<script language='JavaScript'>
<!-- 
   /* /////////////////////////////////////// fadeOpacity ここから */   //--不透明度フェイド関数   function fadeOpacity(layName,swt,stopOpacity){          if(!window.fadeOpacity[layName]) //カウンター初期化       fadeOpacity[layName] =0       //フェイドスイッチ引数省略時初期値(不透明から透明へ)     if(!arguments[1]) swt = -1        //引数swtが -1 なら不透明から透明へ     //           1 なら透明から不透明へフェイドする     if(swt==-1)        var f  = "9876543210"     else if(swt==1)    var f  = "0123456789"     else               var f  = "9876543210"        //停止不透明度引数省略時初期値     if(!arguments[2] && swt==-1)     stopOpacity = 0     else if(!arguments[2] && swt==1) stopOpacity = 10      //フェイド処理         if( fadeOpacity[layName] < f.length-1 ){          //カウンター番目の文字列を取り出す       var opa = f.charAt(fadeOpacity[layName])/10        //終了時不透明度なら終了       if( opa == stopOpacity ){         setOpacity(layName,stopOpacity)  //終了         fadeOpacity[layName] = 0     //リセット         return       }       // 不透明度変更を実行する       setOpacity(layName,opa)       // カウンターを加算       fadeOpacity[layName]++       //--50/1000秒後にfadeOpacityを再実行       setTimeout(           'fadeOpacity("'+layName+'","'+swt+'","'+stopOpacity+'")',50)     } else {       //終了       setOpacity(layName,stopOpacity)       //--リセット       fadeOpacity[layName] = 0     }   }    //--不透明度set    function setOpacity(layName,arg) {     var ua = navigator.userAgent //arg は 0 ～ 1、0は透明、1は不透明。     if( document.layers ) {      //n4とMac版e4.5,e5は0の時hidden       if(arg > 0)     document.layers[layName].visibility='visible'       else if(arg==0) document.layers[layName].visibility='hidden'     } else if( ua.indexOf('Mac_PowerPC') !=-1 && document.all ) {       if(arg > 0)     document.all(layName).style.visibility='visible'       else if(arg==0) document.all(layName).style.visibility='hidden'     } else if(document.all) {  //Win版e5,e6         document.getElementById(layName).style.filter="alpha(opacity=0)"         document.getElementById(layName).filters.alpha.opacity                                                              = (arg * 100)     } else if(ua.indexOf('Gecko')!=-1)  //n6,m1         document.getElementById(layName).style.MozOpacity = arg   }   /* /////////////////////////////////////// fadeOpacity ここまで */ 

  //--レイヤ?スライド 
  var wx=new Array(),wy=new Array(),count=new Array()
  var ex=new Array(),ey=new Array(),spd=new Array()
  var step=new Array(),stepX=new Array(),stepY=new Array()
  var mvFlag=new Array(),slideID=new Array()
  function slideLAYERs(layName,startX,startY,endX,endY,speed,stpx){

    //--移動初期化
    if(!mvFlag[layName]){
     if(document.layers)clearTimeout(slideID[layName])
      count[layName]=0        //--移動回数カウント
      var ofX=(endX-startX)   //--移動距離x
      var ofY=(endY-startY)   //--移動距離y
      step[layName]=stpx      //--ステップ数
      stepX[layName]=ofX/stpx //--移動量x
      stepY[layName]=ofY/stpx //--移動量y
      wx[layName]=startX      //--移動中のx座標
      wy[layName]=startY      //--移動中のy座標
      ex[layName]=endX        //--到着場所のx座標
      ey[layName]=endY        //--到着場所のy座標
      spd[layName]=speed      //--移動スピ?ド(間隔)
      mvFlag[layName]=true    //--移動中ならtrue
    }
    if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
      count[layName]++
      wx[layName]+=stepX[layName]
      wy[layName]+=stepY[layName]
      if(document.getElementById){ //--移動
        document.getElementById(layName).style.left=wx[layName]
        document.getElementById(layName).style.top=wy[layName]
      } else if(document.layers) {
        document.layers[layName].moveTo(wx[layName],wy[layName])
      } else if(document.all){
        document.all(layName).style.pixelLeft=wx[layName]
        document.all(layName).style.pixelTop=wy[layName]
      }
      if(document.layers)clearTimeout(slideID[layName])
      slideID[layName]
                  =setTimeout('slideLAYERs("'+layName+'")',spd[layName])
    }else{ //--停止
      wx[layName]=ex[layName]
      wy[layName]=ey[layName]
      clearTimeout(slideID[layName]);mvFlag[layName]=false

       //--★スライド終了後にフェイドする(関数slideLAYERsをカスタマイズ)
       fadeOpacity('help-0',1,0.8) 

    }
  }


  //--背景色set 
  function setBGCOLOR(layName,color){
    //opera は透明が効かないのでページ背景色と同色へ便宜修正
    if(color=='')(!!window.opera)?color='white':color='transparent';
    if(document.getElementById)       //n6,m1,e5,e6,o6用
      document.getElementById(layName).style.backgroundColor =color
    else if(document.all)             //e4用
      document.all(layName).style.backgroundColor=color
    else if(document.layers){         //n4用
      if(color=='transparent')color=null
        document.layers[layName].bgColor=color 
    }
  }


//-->
</script>

<style type="text/css">
<!--

.helps { position         : absolute           ;
         font-family      : Osaka,'MS PGothic' ;
         width            : 220px              ;
         height           : 150px              ;
         clip             : rect(0,250,150,0)  ;
         color            : #ffffff            ;
         font-size        : 16px               ;
         padding          : 4px                ;
}

#help-0 {
         position         : absolute           ;
         left             : 300px              ;
         top              : -200px             ;
}

#daibutsu { 
         position         : absolute           ;
         left             : 250px              ;
         top              : 350px              ;
}

-->
</style>


<!-- 画像レイヤー -->
<div id="daibutsu">
<img src="//img.allabout.co.jp/gm/article/24030/daibutsu.gif" 
     onmouseover ="setOpacity('help-0',0.1);
                   slideLAYERs('help-0',320,-200,320,500,10,20)"
     onmouseout  ="setOpacity('help-0',0.1);
                   slideLAYERs('help-0',320,500,320,-200,10,20)"
     onload      ="setBGCOLOR('help-0','orange');
                   setOpacity('help-0',0.1)">←画像に触ると...
</div>

<!-- ヘルプレイヤー -->
<div class="helps" id="help-0">
<b>牛久大仏</b><br>
<br>
高さ120m　重さ 4000トン<br>
手のひら 18m<br>
耳の長さ 10m<br>
</div>


* 緑文字が今回の関数
* 赤文字がこのスクリプトで最初に動作する部分