js图片等比例放大缩小实例代码

有些时候，无论是为了视觉效果还是个人习惯，可能会将网页上的图片的尺寸进行一定的调整，这就涉及到图片的等比例缩放问题，本章节就通过一个代码实例，介绍一下如何实现此功能。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>图片的缩放功能-51前端</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>

代码描述：js 图片放大缩小。js图片等比例放大缩小实例代码

下载全部收藏

113 150

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册