js圖片等比例放大縮小例項程式碼

antzone發表於2017-03-14
JS

有些時候，無論是為了視覺效果還是個人習慣，可能會將網頁上的圖片的尺寸進行一定的調整，這就涉及到圖片的等比例縮放問題，本章節就通過一個程式碼例項，介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>圖片的縮放功能-螞蟻部落</title>
<script type="text/javascript">  
var PhotoSize={ 
  zoom:0,
  count:0,
  cpu:0,
  elem:"",
  photoWidth:0,
  photoHeight:0,
  init:function(){ 
    this.elem=document.getElementById("focusphoto"); 
    this.photoWidth=this.elem.scrollWidth; 
    this.photoHeight=this.elem.scrollHeight; 
    this.zoom=1.2;
    this.count=0; 
    this.cpu=1; 
  }, 
  action:function(x){ 
    if(x===0)
    { 
      this.cpu=1; 
      this.count = 0; 
    }
    else
    { 
      this.count+=x;
      this.cpu=Math.pow(this.zoom,this.count);
    }; 
    this.elem.style.width = this.photoWidth * this.cpu +"px"; 
    this.elem.style.height = this.photoHeight * this.cpu +"px"; 
  } 
}; 
window.onload=function()
{
  PhotoSize.init();
  var inputs=document.getElementsByTagName("input");
  inputs[0].onclick=function(){PhotoSize.action(1)}
  inputs[1].onclick=function(){PhotoSize.action(-1)}
  inputs[2].onclick=function(){PhotoSize.action(0)}
  inputs[3].onclick=function(){alert(PhotoSize.cpu)}
}; 
</script> 
</head> 
<body> 
  <input type="button" value="放大" /> 
  <input type="button" value="縮小" /> 
  <input type="button" value="還原大小" /> 
  <input type="button" value="檢視當前倍數" /><br> 
  <img id="focusphoto" src="mytest/JS/suofang.jpg" /> 
</body> 
</html>

以上程式碼實現我們想要的效果，點選按鈕可以實現圖片的放大和縮小功能，以上程式碼比較簡單，這裡就不多介紹了，如有任何疑問可以跟帖留言。

相關文章