zoukankan      html  css  js  c++  java
  • <转>javascript实现图片的等比缩放

    function resizeimg(ImgD,iwidth,iheight) 
         
    var image=new Image(); 
         image.src
    =ImgD.src; 
         
    if(image.width>0 && image.height>0)
            
    if(image.width/image.height>= iwidth/iheight)
               
    if(image.width>iwidth)
                   ImgD.width
    =iwidth; 
                   ImgD.height
    =(image.height*iwidth)/image.width; 
               }
    else
                      ImgD.width
    =image.width; 
                      ImgD.height
    =image.height; 
                    }
     
                   ImgD.alt
    =image.width+"×"+image.height; 
            }
     
            
    else
                    
    if(image.height>iheight)
                           ImgD.height
    =iheight; 
                           ImgD.width
    =(image.width*iheight)/image.height; 
                    }
    else
                            ImgD.width
    =image.width; 
                            ImgD.height
    =image.height; 
                         }
     
                    ImgD.alt
    =image.width+"×"+image.height; 
                }
     
         ImgD.style.cursor
    = "pointer"//改变鼠标指针 
         ImgD.onclick = function() { window.open(this.src);} //点击打开大图片 
        if (navigator.userAgent.toLowerCase().indexOf("ie"> -1//判断浏览器,如果是IE 
          ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开"
          ImgD.onmousewheel 
    = function img_zoom() //滚轮缩放 
          
              
    var zoom = parseInt(this.style.zoom, 10|| 100
              zoom 
    += event.wheelDelta / 12
              
    if (zoom> 0) this.style.zoom = zoom + "%"
              
    return false
          }
     
         }
     else //如果不是IE 
                ImgD.title = "点击图片可在新窗口打开"
             }
     
        }
     
    }
    在需要实现等比缩放的图片上加上onload语句,图片装载时初始化大小。
    具体实现代码如下:

    <img name="" src="" onload="javascript:resizeimg(this,100,200)">
  • 相关阅读:
    循环结构
    位运算符
    Switch 选择结构
    if结构和逻辑运算符
    变量和运算符
    [luogu1090 SCOI2003] 字符串折叠(区间DP+hash)
    [luogu2329 SCOI2005] 栅栏(二分+搜索)
    [luogu 4886] 快递员
    [luogu4290 HAOI2008]玩具取名(DP)
    [luogu2624 HNOI2008]明明的烦恼 (prufer+高精)
  • 原文地址:https://www.cnblogs.com/symbol441/p/979136.html
Copyright © 2011-2022 走看看