繁体中文
设为首页
加入收藏
当前位置:网站制作首页 >> JavaScript教程 >> 按比例微缩图片的一段小小的JS代码

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

2007-08-15 08:00:00  作者:  来源:互联网  浏览次数:0  文字大小:【】【】【
简介:自己写的一个非常简单的图片微缩JS代码,当然网上有很多类似的代码,在此确实是献丑了。 主要方法写在SetImgSize.js里面 SetImgSize.js Code highlighting produced by Actipro CodeHighlighter (freeware) http...
关键字:比例 小小 代码 图片

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

主要方法写在SetImgSize.js里面

SetImgSize.js

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

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

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--> 1

2

3

4 测试

5

6

7

8 限定了宽度150px

9

10
限定了高度150px

11

12
限定了高度150px、宽度150px

13

14

15 就写到这里了,呵呵,是不是很简单啊!

源码下载 SetImgSize.rar

责任编辑:admin
相关文章