如何將圖漸漸變大？

下面的範例可以將圖漸漸變大。 <img id='pic1' width='30px' height='30px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg' /> <script type='text/javascript'> function imgEnlarge() { var o=document.getElementById(pid); o.width=Math.floor( o.width*1.2 ); o.height=Math.floor( o.height*1.2 ); times++; if( times==10 ) clearInterval(timeID) } var times=0; var timeID; var pid; function startImg() { timeID=setInterval(imgEnlarge, 500); pid='pic1'; } </script> <p><a href='javascript:startImg()'>點此開始放大圖</a>

• 程式用法：

  <img id='pic1' width='30px' height='30px'
    src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg' />
  
  <script type='text/javascript'>
  function imgEnlarge()
  {
    var o=document.getElementById(pid);
    o.width=Math.floor( o.width*1.2 );
    o.height=Math.floor( o.height*1.2 );
    times++;
    if( times==10 )
      clearInterval(timeID) 
  }
  var times=0;
  var timeID;
  var pid;
  function startImg()
  {
    timeID=setInterval(imgEnlarge, 500);
    pid='pic1';
  }
  </script>
  <p><a href='javascript:startImg()'>點此開始放大圖</a>
  

• 執行結果：

  

  點此開始放大圖

範例解說：
1. 將你的圖檔放在 <img > 元素中的 src 屬性中，然後設定初始的長與寬（width, height）。id 可以自行訂定。
2. javascript 會將此圖的長寬調整 10 次，每次放大 1.2 倍，兩次間隔 500 微秒（千分之一秒）。
3. 此範例用到以下元素與方法：IMG 元素, getElementById() 方法, Math.floor() 方法, setInterval() 方法。