首  页  |  酷站  |  精品网站  |  原创作品秀  |  网络学院   |  信息中心  |  艺术设计  |  求职招聘  |  建站资源  |  服装网站  |  论坛  |  设计部落  |  网站综合
个人网页  商业网站  业界动态  设计赛事  网站资源  下载专区  设计欣赏  CG-插画  JS特效  娱乐  国际品牌  知名品牌  服装院校  专题欣赏  SEO  BANNER
域名注册 虚拟主机 广州网站建设 广州网页设计 IDC赞助 设计资源下载 虚拟主机 域名注册 品牌网站建设 服装品牌网站建设 广告服务 网站推广 娱乐
当前位置:首 页 >> JS特效 >> 图形图象类 >> 按比例微缩图片的代码

按比例微缩图片的代码

来源:cnwebshow.com整理 被读308次

中资源
转载请注明出处-中国设计秀-cnwebshow.com

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

  主要方法写在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>         就写到这里了,呵呵,是不是很简单啊!

转载请注明出处-中国设计秀-cnwebshow.com



投稿 】【对本文进行评论】 【字体: 】【发布于2006-11-01 09:36】

相关专题:暂无相关专题

上一篇:图片透明效果   下一篇:用trace函数实现互动地图后台快速标注地名
 认证LOGO下载
     
Copyright © 2005-2007 中国设计秀_网页设计教程_优秀网页设计欣赏_平面设计欣赏 All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!中国设计秀,秀---无处不在!!
QQ:54292427  8208442 MSN:kingvisual#hotmail.com 交流群:9107036 3848215 8850631
粤ICP备05067046号 RSS