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>
|
|
