【Javascript】クロスブラウザを制する 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>






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