【Javascript】クロスブラウザを制する Part 2　2-4 ワイプクリップ

<script language='JavaScript'>
<!--

  /*ワイプクリップ指定用関数 /////////////////////// UseFree 
  ==========================================================
   Win   n4 n6 moz e4   e5 e6,
   Mac   n4 n6 moz e4.5 e5,
   Linux n4 n6 moz    
  ==========================================================
  使用例
  wipeCLIP('レイヤ－名'
            ,初期上辺,初期右辺,初期下辺,初期左辺,背景色
            ,終了上辺,終了右辺,終了下辺,終了左辺,ステップ)
  Support http://game.gr.jp/js/
  ========================================================*/

  var wipIniFlag=false
  var t,r,b,l
  var wiptID=setTimeout('',1)

  function wipeCLIP(idName,stT,stR,stB,stL
                    ,color,edT,edR,edB,edL,step){
    if(!wipIniFlag){ //--wipe ini
      t=stT;r=stR;b=stB;l=stL;
      stepT=(Math.max(t,edT)-Math.min(t,edT))/step //step計算
      stepR=(Math.max(r,edR)-Math.min(r,edR))/step
      stepB=(Math.max(b,edB)-Math.min(b,edB))/step
      stepL=(Math.max(l,edL)-Math.min(l,edL))/step
          clipvalue  = t+','+r+','+b+','+l+',"'
          clipvalue += color+'",'
          clipvalue += edT+','+edR+','+edB+','+edL+','+step

      if(document.all)
        document.all(idName).style.backgroundColor=color
      else if(document.getElementById)
        document.getElementById(idName).style.backgroundColor
                                                       =color
      else if(document.layers)
        document.layers[idName].bgColor=color
      

      wipIniFlag=true 
    }
    if(t>edT)t-=stepT
    if(r<edR)r+=stepR
    if(b<edB)b+=stepB
    if(l>edL)l-=stepL
    if(!(t>edT)&&!(r<edR)&&!(b<edB)&&!(l>edL)){
      clearTimeout(wiptID)
    }else{
      wiptID=setTimeout('wipeCLIP("'+idName+'",'
                                         +clipvalue+')',10)
    }

    if(document.all){  
      //IE*clipがレイヤ－より大きい時clipに合わせる
      with(document.all(idName).style){
        if(pixelWidth<r)pixelWidth=r
        if(pixelHeight<b)pixelHeight=b
      }
    } 

    var clipst = 'rect('+parseInt(t)+','+parseInt(r)+','
                        +parseInt(b)+','+parseInt(l)+')' 

    if(document.getElementById)        //N6,Moz,IE5,IE6用
      document.getElementById(idName).style.clip = clipst 
    else if(document.layers)                      //NN4用
      with(document.layers[idName].clip){
        top    = parseInt(t) ; right = parseInt(r)
        bottom = parseInt(b) ; left  = parseInt(l) 
      }
    else if(document.all)                        //IE4用
      document.all(idName).style.clip=clipst 

  }

  /*ワイプクリップ指定用関数ここまで///////////////////////*/

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

.wipetest{ position:absolute;
           font-family:Osaka,Arial;
           font-size:10pt }

#sheet1  { left:150px;top:200px;
           
           /*--初めはサイズを小さくして隠しておきます--*/
           clip:rect(0,0,0,0) }

//-->
</style>

<div class="wipetest" id="form0">
  <form>
    <input type="button" value="高橋まりも" 
           onClick="wipIniFlag=false;
             wipeCLIP('sheet1',0,0,0,0,null,0,166,213,0,20)">
  </form>
</div>

<!--このレイヤーにクリップがかかります--> 
<div class="wipetest" id="sheet1">
  <img src="marimo.gif">
</div>