夏日博客

A-A+

js图片等比例缩放程序代码

2016年10月13日 前端设计 暂无评论 阅读 5 views 次

下面总结两个js图片等比例缩放程序代码,有需要学习的朋友可参考。

例1,代码如下:

  1. <script type="text/javascript">  
  2.  function changeImg(objImg)  
  3.  {  
  4.      var most = 690;        //设置最大宽度  
  5.      if(objImg.width > most)  
  6.      {  
  7.          var scaling = 1-(objImg.width-most)/objImg.width;      
  8.          //计算缩小比例  
  9.          objImg.width = objImg.width*scaling;  
  10.          objImg.height = objImg.height;            //img元素没有设置高度时将自动等比例缩小  
  11.            
  12.          //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小  
  13.      }  
  14.        
  15.  }  
  16.  </script>  

调用方法,代码如下:

  1. <img src="" onload="changeImg(this);" />  

例2,代码如下:

  1. <script language="javascript">   
  2. //图片按比例缩放  
  3. var flag = false;  
  4. function DrawImage(ImgD) {  
  5.     var image = new Image();  
  6.     var iwidth = 500; //定义允许图片宽度  
  7.     var iheight = 300; //定义允许图片高度  
  8.     image.src = ImgD.src;  
  9.     if (image.width > 0 && image.height > 0) {  
  10.         flag = true;  
  11.         if (image.width / image.height >= iwidth / iheight) {  
  12.             if (image.width > iwidth) {  
  13.                 ImgD.width = iwidth;  
  14.                 ImgD.height = (image.height * iwidth) / image.width;  
  15.             } else {  
  16.                 ImgD.width = image.width;  
  17.                 ImgD.height = image.height;  
  18.             }  
  19.             ImgD.alt = image.width + "×" + image.height;  
  20.         }  
  21.         else {  
  22.             if (image.height > iheight) {  
  23.                 ImgD.height = iheight;  
  24.                 ImgD.width = (image.width * iheight) / image.height;  
  25.             } else {  
  26.                 ImgD.width = image.width;  
  27.                 ImgD.height = image.height;  
  28.             } //xiariboke.net  
  29.             ImgD.alt = image.width + "×" + image.height;  
  30.         }  
  31.     }  
  32. }  
  33. </script>  

调用代码如下:

  1. <img src="图片" onload="javascript:DrawImage(this)">  

例3,代码如下:

  1. <script language="javascript" type="text/javascript">  
  2. //改变图片大小  
  3. function resizepic(thispic)  
  4. {  
  5. if(thispic.width>600){thispic.height=thispic.height*600/thispic.width;thispic.width=600;}   
  6. }  
  7. //无级缩放图片大小  
  8. function bbimg(o)  
  9. {  
  10.   var zoom=parseint(o.style.zoom, 10)||100;  
  11.   zoom+=event.wheeldelta/12;  
  12.   if (zoom>0) o.style.zoom=zoom+'%';  
  13.   return false;  
  14. }  
  15. </script>  
标签：

给我留言