亮术网
程序开发 > Javascript > 正文

js轻松实现图片缩放

亮术网 2013-05-24 本网整理

　　由于页面空间有限，图片常常先只显示缩约图，而用户往往要看清晰的大图，所以就必须把图片放大，以下是 Javascript实现的图片缩放实例，保存为html文件即可预览。

 

　　<html>  
　　<head>  
　　<title>图片大小缩放</title>
　　<style type="text/css">
　　　　.imgShow{width:680px; height:500px; overflow-x:scroll; overflow-y:scroll; margin- bottom:20px; overflow:hidden;}
　　</style>
　　</head>
　　<body onload="init()">
　　　　<h3>图片缩放</h3>
　　　　<div class="imgShow"><img id="img" src="ad.jpg" alt="" /></div>
　　　　<div>
　　　　　　<input type="button" value="放 大" onclick="zoomOut (1.5)" />
　　　　　　<input type="button" value="缩 小" onclick="zoomIn (1.5)" />
　　　　　　<input type="button" value="重 置" onclick="resetImg()" />
　　　　</div>
   
　　　　<script language="JavaScript" type="text/javascript">

　　　　　　var originalW = 0,originalH = 0,currentW = 0,currentH = 0;
　　　　　　var img = document.getElementById("img");

　　　　　　function init(){
　　　　　　　　currentW = img.width;
　　　　　　　　currentH = img.height;
　　　　　　　　originalW = currentW;
　　　　　　　　originalH = currentH;
　　　　　　}

　　　　　　function zoomOut(n){
　　　　　　　　img.width = currentW * n;
　　　　　　　　img.height = currentH * n;
　　　　　　　　UpdateCurrent();
　　　　　　}

　　　　　　function zoomIn(n){
　　　　　　　　img.width = currentW/n;
　　　　　　　　img.height = currentH/n;
　　　　　　　　UpdateCurrent();
　　　　　　}

　　　　　　function resetImg(){
　　　　　　　　img.width = originalW;
　　　　　　　　img.height = originalH;
　　　　　　　　UpdateCurrent();
　　　　　　}

　　　　　　function UpdateCurrent(){
　　　　　　　　currentW = img.width;
　　　　　　　　currentH = img.height;
　　　　　　}
　　　　</script>
　　</body>
　　</html>

本文浓缩标签：图片缩放js