五款js 图片等比例缩放效果

<script type="text/网页特效">
<!--
//图片按比例缩放---素材图片页面控制
var flag=false;
function newdrawimage(imgd){
 var image=new image();
 var iwidth = 200;  //定义允许图片宽度
 var iheight = 150;  //定义允许图片高度
 image.src=imgd.src;
 if(image.width>0 && image.height>0){
 flag=true;
 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;
  }
 }
} 
//-->
</script>

<img src="admin/uploadpic/2009811522257007705.jpg" width="194" height="130" border="0"  onload="newdrawimage(this)"/>

方法一：在图片加载完毕后用onload句柄触发执行脚本，重设图片的宽度为图片宽度和300两者的最小值。
代码示例： <img src="demo.gif" onload="if(this.width>300)this.width=300">
或者

<img src="demo.gif" onload="this.width=math.min(this.width,300)">

方法二：按比例缩小。只需要把js加在head之间，再在body处加入onload="resizeimages();"代码。

<script language="javascript">
<!--
function resizeimages()
{
var myimg,oldwidth;
var maxwidth=180; //缩放系数
for(i=0;i <document.images.length;i++){
myimg = document.images[i];
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.width = maxwidth;
myimg.height = myimg.height * (maxwidth/oldwidth);
}
}
}
//-->
</script>

或

<script language="javascript">
<!--
//图片按比例缩放
var flag=false;
function drawimage(imgd,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new image();
image.src=imgd.src;
if(image.width>0 && image.height>0){
flag=true;
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;
}
}
}
//-->
</script>

调用：<img src="images/toplogo.gif" onload="javascript:drawimage(this,100,100)">

方法三

<script language="javascript">
<!--
//图片按比例缩放
var flag=false;
function drawimage(imgd,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new image();
image.src=imgd.src;
if(image.width>0 && image.height>0){
flag=true;
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;
}
}
}
//-->
</script>

调用

：<img src="images/toplogo.gif" onload="javascript:drawimage(this,100,100)">

方法四

<script type="text/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 = "点击图片可在新窗口打开";
　　　　　　   }
    }
}
</script>

 

<img name="" src="upload/<%=rs("picfilename")%>" alt="<%=rs("title")%>" style="border:1px #999 solid;" onload="javascript:resizeimg(this,150,140)">