JS图片的放大与缩小

weixin_30527143

于 2015-08-18 17:04:00 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/a-mumu/p/4739930.html

版权

<!doctype html>
<head>
<meta charset=utf-8" />
<title>javascript控制图片缩小或者放大</title>
</head>
<body>
<script type="text/javascript">
var oTime;
function changeSize(id,action){
   var obj=document.getElementById(id);
   obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';
   oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);
   }
   document.οnmοuseup=function(){
   window.clearTimeout(oTime);
   }
   </script>
<div style="height: 200px; overflow: auto;">
   <img id="headImg" src="http://www.phpernote.com/images/logo.gif" width="67" height="55" style="zoom: 100%;"></div>
   <button οnmοusedοwn="changeSize('headImg','+');" οnmοuseup="window.clearTimeout(oTime);">放大</button>
   <button οnmοusedοwn="changeSize('headImg','-');" οnmοuseup="window.clearTimeout(oTime);">缩小</button>
   </body>
   </html>