按比例微缩图片的一段小小的JS代码

zZ丶DjJ

zZ丶DjJ

2016-02-19 15:39

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的按比例微缩图片的一段小小的JS代码,希望大家看完后能赶快学习起来。

自己写的一个非常简单的图片微缩JS代码,当然网上有很多类似的代码,在此确实是献丑了。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

主要方法写在SetImgSize.js里面 SetImgSize.js

 1 //智能微缩图片JS方法
 2 //参数:imgID(图片的标识ID)
 3 //参数:maxWidth(图片的最大宽度,值为0则表示不限制宽度)
 4 //参数:maxHeight(图片的最大高度,值为0则表示不限制高度)
 5 function setImgSize(imgID,maxWidth,maxHeight)
 6 {
 7     var img = document.images[imgID];
 8     if(maxWidth 1)
 9     {
10         if(img.height maxHeight)
11         {
12             img.height = maxHeight;
13         }
14         return true;
15     }
16     if(maxHeight 1)
17     {
18         if(img.width maxWidth)
19         {
20             img.width = maxWidth;
21         }
22         return true;
23     }
24     if(img.height maxHeight || img.width maxWidth)
25     {
26         if((img.height / maxHeight) (img.width / maxWidth))
27         {
28             img.height = maxHeight;
29         }
30         else
31         {
32             img.width = maxWidth;
33         }
34         return true;
35     }
36 }         功能实现原理是在图片加载完毕后(onload事件)用JS实现微缩。
         下面是一个测试用的文件test.htm test.htm
 1 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
 2 html xmlns="http://www.w3.org/1999/xhtml"
 3 head
 4     title测试/title
 5     script language="javascript" type="text/javascript" src="setImgSize.js"/script
 6 /head
 7 body
 8     限定了宽度150px
 9     br /img alt="" id="img1" onload="setImgSize(''img1'',150,0);" src="http://img.poco.cn/photo/20060602/972374149620060602140117_1.jpg" /
10     br /限定了高度150px
11     br /img alt="" id="img2" onload="setImgSize(''img2'',0,150);" src="http://img.poco.cn/photo/20060602/972374149620060602140117_4.jpg" /
12     br /限定了高度150px、宽度150px
13     br /img alt="" id="img3" onload="setImgSize(''img3'',150,150);" src="http://static.flickr.com/46/147572720_8b25471150_o.jpg" /
14 /body
15 /html         就写到这里了,呵呵,是不是很简单啊!
 源码下载 http://www.cnblogs.com/Files/aiqingayu/SetImgSize.rar
http://www.cnblogs.com/aiqingayu/archive/2006/10/25/539621.html

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

按比例微缩图片的一段小小的JS代码

Web开发
按比例微缩图片的一段小小的JS代码

一段非常简单的让图片自动切换js代码

Web开发
一段非常简单的让图片自动切换js代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

一段几乎可以让你死机的JS代码

Web开发
一段几乎可以让你死机的JS代码

一段好玩的JavaScript代码

Web开发
一段好玩的JavaScript代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JS图片压缩–图片后加载后按比例缩放

Web开发
JS图片压缩–图片后加载后按比例缩放

一段返回随机记录的代码

ASP
一段返回随机记录的代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win8下卸载已安装程序的技巧

Win8下卸载已安装程序的技巧

Win10应用商店的用法

Win10应用商店的用法
下拉加载更多内容 ↓