图片等比例缩放

1.

1. var showImgSize = function(imgsize,areasize,obj) {
2.     var new_w = new_h = 0;
3.     var img = new Image();
4.     img.src = $(obj).attr('src');
5.     if(img.width>0) {
6.         ori_w = img.width;
7.         ori_h = img.height;
8.     }else{
9.         img = imgsize.split("x");
10.         ori_w = img[0]=="null"?100:parseInt(img[0]);
11.         ori_h = img[1]=="null"?100:parseInt(img[1]);
12.     }
13.     //图片原始大小写入DOM自定义属性
14.     obj.orgWidth = ori_w;
15.     obj.orgHeight = ori_h;
16.     area = areasize.split("x");
17.     area_w = parseInt(area[0]);
18.     area_h = parseInt(area[1]);
20.     if(ori_w>ori_h) {
21.         new_w = ori_w>area_w?area_w:ori_w;
22.         new_h = parseInt(ori_h*new_w/ori_w);
23.         if(new_h>area_h) {
24.             new_h = area_h;
25.             new_w = parseInt(ori_w*new_h/ori_h);
26.         }
27.         //obj.zoomsize = new_w/ori_w *100;
28.         $(obj).css('zoomsize',new_w/ori_w *100);
29.     } else {
30.         new_h = ori_h>area_h?area_h:ori_h;
31.         new_w = parseInt(ori_w*new_h/ori_h);
32.         if(new_w>area_w) {
33.             new_w = area_w;
34.             new_h = parseInt(ori_h*new_w/ori_w);
35.         }
36.         //图片缩放率大小写入DOM自定义属性
37.         $(obj).css('zoomsize',new_h/ori_h *100);
38.     }
39.     if(obj) {
40.         $(obj).width(new_w);
41.         $(obj).height(new_h);
42.     }
43.     return {width: new_w, height: new_h, roomsize: obj.roomsize};
44. }

2. 页面加载

1. /*
2. **************图片预加载插件******************
3. ///作者：没剑(2008-06-23)
4. ///http://regedit.cnblogs.com
6. ///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来
7. 可对图片进行是否自动缩放功能
8. 此插件使用时可让页面先加载，而图片后加载的方式，
9. 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题
10. ///参数设置：
11. scaling     是否等比例自动缩放
12. width       图片最大高
13. height      图片最大宽
14. loadpic     加载中的图片路径
15. */
16. jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
17.     if(loadpic==null)loadpic="load3.gif";
18.     return this.each(function(){
19.         var t=$(this);
20.         var src=$(this).attr("src")
21.         var img=new Image();
22.         //alert("Loading...")
23.         img.src=src;
24.         //自动缩放图片
25.         var autoScaling=function(){
26.             if(scaling){
27.             
28.                 if(img.width>0 && img.height>0){ 
29.                     if(img.width/img.height>=width/height){ 
30.                         if(img.width>width){ 
31.                             t.width(width); 
32.                             t.height((img.height*width)/img.width); 
33.                         }else{ 
34.                             t.width(img.width); 
35.                             t.height(img.height); 
36.                         } 
37.                     } 
38.                     else{ 
39.                         if(img.height>height){ 
40.                             t.height(height); 
41.                             t.width((img.width*height)/img.height); 
42.                         }else{ 
43.                             t.width(img.width); 
44.                             t.height(img.height); 
45.                         } 
46.                     } 
47.                 } 
48.             }   
49.         }
50.         //处理ff下会自动读取缓存图片
51.         if(img.complete){
52.             //alert("getToCache!");
53.             autoScaling();
54.             return;
55.         }
56.         $(this).attr("src","");
57.         var loading=$("<img alt=/"加载中.../" title=/"图片加载中.../" src=/""+loadpic+"/" />");
58.         
59.         t.hide();
60.         t.after(loading);
61.         $(img).load(function(){
62.             autoScaling();
63.             loading.remove();
64.             t.attr("src",this.src);
65.             t.show();
66.             //alert("finally!")
67.         });
68.         
69.     });
70. }