自己写的一个非常简单的图片微缩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://webdesign.chinaitlab.com/UploadFiles_8014/200610/20061026150034994.jpg" /> 10 <br />限定了高度150px 11 <br /><img alt="" id="img2" onload="setImgSize('img2',0,150);" src="http://webdesign.chinaitlab.com/UploadFiles_8014/200610/20061026150053586.jpg" /> 12 <br />限定了高度150px、宽度150px 13 <br /><img alt="" id="img3" onload="setImgSize('img3',150,150);" src="http://webdesign.chinaitlab.com/UploadFiles_8014/200610/20061026150119138.jpg" /> 14 </body> 15 </html> 就写到这里了,呵呵,是不是很简单啊!
|