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
查看全文
相关阅读:
String、StringBuffer、StringBuilder
动态规划引入—矩阵乘法
flask中间件
有状态服务,无状态服务
python 工厂模式
python 单例模式
python 工厂模式
python timedelta() 和relativedelta()的区别
mongo 查看(集合)表结构
logstash 实现数据源分流
原文地址:https://www.cnblogs.com/zpq521/p/817547.html
最新文章
2019-2020-2 20175317钟睿文《网络对抗技术》Exp2 后门原理与实践
2019-2020-2 20175317钟睿文《网络对抗技术》Exp1+ 逆向进阶
2019-2020-2 20175317钟睿文《网络对抗技术》Exp1 PC平台逆向破解
2019-2020-2 网络对抗技术 20175318 Exp7 网络欺诈防范
抖音无水印解析 Python
Advanced AI For Games with Goal-Oriented Action Planning
2019-2020-2 网络对抗技术 20175318 Exp6 MSF基础应用
2019-2020-2 网络对抗技术 20175318 Exp5 信息搜集与漏洞扫描
2019-2020-2 网络对抗技术 20175318 Exp4 恶意代码分析
20175318 可信计算基础 实验四 可信数据密封程序设计
热门文章
2019-2020-2 网络对抗技术 20175318 Exp3 免杀原理与实践
2019-2020-2 网络对抗技术 20175318 Exp2 后门原理与实践
2019-2020-2 网络对抗技术 20175318 Exp1 PC平台逆向破解
小学生数学题系统02
可复用的链表
大整数运算
埃式筛法——求n以内素数
算法高效技巧之活用递推
算法高效技巧之打表
two pointers
Copyright © 2011-2022 走看看