zoukankan
html css js c++ java
按比例微缩图片的一段小小的JS代码
1
1
//
智能微缩图片JS方法
2
2
//
参数:imgID(图片的标识ID)
3
3
//
参数:maxWidth(图片的最大宽度,值为0则表示不限制宽度)
4
4
//
参数:maxHeight(图片的最大高度,值为0则表示不限制高度)
5
5
function setImgSize(imgID,maxWidth,maxHeight)
6
6
{
7
7
var img
=
document.images[imgID];
8
8
if
(maxWidth
<
1
)
9
9
{
10
10
if
(img.height
>
maxHeight)
11
11
{
12
12
img.height
=
maxHeight;
13
13
}
14
14
return
true
;
15
15
}
16
16
if
(maxHeight
<
1
)
17
17
{
18
18
if
(img.width
>
maxWidth)
19
19
{
20
20
img.width
=
maxWidth;
21
21
}
22
22
return
true
;
23
23
}
24
24
if
(img.height
>
maxHeight
||
img.width
>
maxWidth)
25
25
{
26
26
if
((img.height
/
maxHeight)
>
(img.width
/
maxWidth))
27
27
{
28
28
img.height
=
maxHeight;
29
29
}
30
30
else
31
31
{
32
32
img.width
=
maxWidth;
33
33
}
34
34
return
true
;
35
35
}
36
36
}
自己写的一个非常简单的图片微缩JS代码,当然网上有很多类似的代码,在此确实是献丑了。
主要方法写在SetImgSize.js里面
功能实现原理是在图片加载完毕后(onload事件)用JS实现微缩。
下面是一个测试用的文件test.htm
1
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
3
<
head
>
4
4
<
title
>
测试
</
title
>
5
5
<
script
language
="javascript"
type
="text/javascript"
src
="setImgSize.js"
></
script
>
6
6
</
head
>
7
7
<
body
>
8
8 限定了宽度150px
9
9
<
br
/><
img
alt
=""
id
="img1"
onload
="setImgSize('img1',150,0);"
src
="http://img.poco.cn/photo/20060602/972374149620060602140117_1.jpg"
/>
10
10
<
br
/>
限定了高度150px
11
11
<
br
/><
img
alt
=""
id
="img2"
onload
="setImgSize('img2',0,150);"
src
="http://img.poco.cn/photo/20060602/972374149620060602140117_4.jpg"
/>
12
12
<
br
/>
限定了高度150px、宽度150px
13
13
<
br
/><
img
alt
=""
id
="img3"
onload
="setImgSize('img3',150,150);"
src
="http://static.flickr.com/46/147572720_8b25471150_o.jpg"
/>
14
14
</
body
>
15
15
</
html
>
就写到这里了,呵呵,是不是很简单啊!
下载
SetImgSize.rar
http://u.huoban001.com/space.php
查看全文
相关阅读:
IOS回调机制总结
2.25~当svn服务器ip地址变了怎么办?
ubuntu硬件信息,内存DDR详细信息
关于JS相等比较算法(==)的原理
ubuntu更改鼠标滚轮方向为自然方向(运动方向和滚轮滚动方向一致)
C#模拟js的Json对象创建,操作
关于json返回日期格式化的解决方案
js定时器 timer
ubuntu GUI界面复制文件没权限的解决方案
CodeSmith 模板
原文地址:https://www.cnblogs.com/zpq521/p/817547.html
最新文章
突袭HTML5之WebGL 3D概述(上) WebGL原生开发
突袭HTML5之SVG 2D入门4 笔画与填充
突袭HTML5之SVG 2D入门12 SVG DOM
GameLoft 成都地区 Java/C++ PHP 编程人员招聘 (代发)
建立企业级测时报告体系(一) 测试报告体系服务端详述
处理非主键的主键
闲谈: 测试报告的插入图片
Hello Transaction,事务.
闲谈: 测试报告系统
编译程序出现一个: 可访问性不一致; 产生的原因和解决方法
热门文章
建立企业级产品测试报告体系(概述)
流程中启动其它流程的问题和解决方法流程的锁定
IOS开发中Info.Plist中UIRequiredDeviceCapabilities的用法
IOS 程序插件及功能动态更新思路
3.04~设置屏幕常亮、TableView小bug~
Objc runtime(一)
人生有所获
iOS 6 IAP入门
iphone中扫描wifi热点
iOS AvPlayer AvAudioPlayer音频的后台播放问题
Copyright © 2011-2022 走看看