网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

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

例1

 代码如下 复制代码

<script type="text/javascript">
 function changeImg(objImg)
 {
     var most = 690;        //设置最大宽度
     if(objImg.width > most)
     {
         var scaling = 1-(objImg.width-most)/objImg.width;   
         //计算缩小比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;            //img元素没有设置高度时将自动等比例缩小
        
         //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
     }
    
 }
 </script>

调用方法

 代码如下 复制代码

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


例2

 代码如下 复制代码

<script language="javascript">
//图片按比例缩放
var flag = false;
function DrawImage(ImgD) {
    var image = new Image();
    var iwidth = 500; //定义允许图片宽度
    var iheight = 300; //定义允许图片高度
    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="图片" onload="javascript:DrawImage(this)">

例3

 代码如下 复制代码

<script language="javascript" type="text/javascript">
//改变图片大小
function resizepic(thispic)
{
if(thispic.width>600){thispic.height=thispic.height*600/thispic.width;thispic.width=600;}
}
//无级缩放图片大小
function bbimg(o)
{
  var zoom=parseint(o.style.zoom, 10)||100;
  zoom+=event.wheeldelta/12;
  if (zoom>0) o.style.zoom=zoom+'%';
  return false;
}
</script>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论