クロスブラウザを制する Part 2　2-36 レイヤーズーム

<script type='text/javascript'>
<!--

  //--レイヤーズーム
  function zoomLAYER(layName,offsetx,offsety,timer){

    var w,h  //幅,高さ
    //ズーム後の幅と高さを調べる
    if(window.opera){                        //opera
      var oj = document.getElementById(layName).style
      w = oj.pixelWidth  + offsetx
      h = oj.pixelHeight + offsety
    } else if(document.getElementById){      //e5,e6,n6,n7,m1用
      var oj = document.getElementById(layName).style
      w = parseInt(oj.width)  + parseInt(offsetx) 
      h = parseInt(oj.height) + parseInt(offsety) 
    } else if(document.all){                 //e4用
      var oj = document.all(layName).style
      w = oj.pixelWidth  + offsetx
      h = oj.pixelHeight + offsety
    } else if(document.layers){               //n4用
      w = document.layers[layName].clip.width  + offsetx
      h = document.layers[layName].clip.height + offsety
    }

    //幅と高さが0超ならリサイズと再起動、以下なら停止
    if( w > 0 && h > 0){

      //リサイズ
      if(window.opera){                          //opera
        oj.pixelWidth  = w 
        oj.pixelHeight = h 
      } else if(document.getElementById){        //e5,e6,n6,n7,m1用
        oj.width  = w +'px' 
        oj.height = h +'px' 
    } else if(document.all){                 //e4用
        oj.pixelWidth  = w 
        oj.pixelHeight = h 
      } else if(document.layers){              //n4用
        document.layers[layName].resizeTo( w , h )
      }

      //再起動
      clearTimeout(zoomLAYER[layName])
      zoomLAYER[layName] = setTimeout(
        "zoomLAYER('"+layName+"',"+offsetx+","+offsety+","+timer+")",timer)

    } else {

      //クリア
      clearTimeout(zoomLAYER[layName])
      return 

    }
  }

  //--背景色セット
  function setBGCOLOR(layName,color){
    //opera は透明が効かないのでページ背景色と同色へ便宜修正
    if(color=='')(!!window.opera)?color='white':color='transparent';
    if(document.getElementById)       //e5,e6,n6,n7,m1,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 
    }
  }

  //--背景画像セット
  function setBGIMG(layName,image){ 
    if(document.getElementById)             //e5,e6,n6,n7,m1,o6用
      document.getElementById(layName).style.backgroundImage 
         = (image=='')?'':'url('+image+')'
    else if(document.all)                   //e4用
      document.all(layName).style.backgroundImage='url('+image+')'
    else if(document.layers)                //n4用
      document.layers[layName].background.src=(image=='')?null:image
  }

//-->
</script>

<!--↓このレイヤ−がズームします///////////-->
<div id="lay0"
     style="position         : absolute  ;
            width            : 100px     ;/* ←必須 */
            height           : 50px      ;/* ←必須 */
            left             : 100px     ;
            top              : 100px     ;">
 T E S T 
</div>

<form>

<input type="button" style="width:450px"
       value="背景画像有り、背景色無し、幅+5px 高さ+5px ずつズーム"
       onclick="setBGIMG('lay0','');
                setBGCOLOR('lay0','#33cccc');
                zoomLAYER('lay0',5,5,30)">

<input type="button" style="width:450px"
       value="背景画像有り、背景色無し、幅-10px 高さ-10px ずつズーム"
       onclick="setBGIMG('lay0','./300300.gif');
                setBGCOLOR('lay0','');
                zoomLAYER('lay0',-10,-10,30)">

<input type="button" style="width:450px"
       value="ズーム停止"
       onclick="clearTimeout(zoomLAYER['lay0'])">

</form>






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