图片比例缩放小插件

Demo : Demo

Demo截图：

 

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     *{ margin:0;padding:0; }
 8     .box{ margin:100px auto; width:80px; height:80px;overflow:hidden; }
 9     </style>
10     <script src="https://code.jquery.com/jquery-1.8.3.js"></script>
11     <script>
12     $(function(){
13 
14       $('img').scaling();
15 
16     });
17 
18     $.fn.scaling = function( opt ){
19 
20       var ops = {
21              'custom' : false,
22              'width'  : 100, 
23              'height' : 100
24           };
25 
26       var options = $.extend(ops,opt);
27 
28       $(this).each(function() {
29 
30         var $this = $(this);
31 
32         if( !options.custom ){
33           options.width  = $this.parent().width(); 
34           options.height = $this.parent().height();
35         }
36 
37         $this.css({ width: options.width+'px', height: options.height+'px'});
38         var img = new Image();
39         img.src = $this.attr('src');
40 
41         img.onload = function(){
42 
43           var old_width = img.width,
44               old_height = img.height,
45               flag = old_width < old_height ? old_width / options.width : old_height / options.height,
46               this_width = old_width / flag,
47               this_height = old_height / flag;
48 
49           if( this_width < options.width ){
50             this_width = width;
51           }
52 
53           if( this_height < options.height ){
54             this_height = options.height;
55           }
56 
57           $this.css({ width: this_width, height: this_height});
58 
59           var iTop = (this_height - options.height) * 0.3,
60               iLeft = (this_width - options.width) * 0.5;
61 
62           if ( old_width < old_height ) {
63 
64             $this.css('margin-left', '0px');
65             $this.css('margin-top', '-' + iTop + 'px');
66 
67           }else if( old_width > old_height ) {
68 
69             $this.css('margin-left', '-' + iLeft + 'px');
70             $this.css('margin-top', 0);
71 
72           }else{
73 
74             $this.css('margin-left', 0);
75             $this.css('margin-top', 0);
76 
77           }
78 
79           $this.fadeIn();
80 
81         };
82 
83         img.onerr = function(){
84 
85           img.src = $this.attr('src');
86 
87         };
88 
89       });
90 
91     };
92     </script>
93 </head>
94 <body>
95     <div class="box" >
96         <img src="http://static.cnblogs.com/images/logo_small.gif"   alt="">
97     </div>
98 </body>
99 </html>
View Code

 

后记：

在公司项目里看到比例缩放图片的方法，改写成一个简单的jQuery插件。

只有三个简单的参数：

custom ： false/true 是否根据父级容器宽高定义大小，只有为true时width,height两个参数才生效;

width    :  目标放大的宽度;

height   :  目标放大的高度;

代码解释 :

flag = old_width < old_height ? old_width / options.width : old_height / options.height

求出最小值的比例

this_width = old_width / flag,
this_height = old_height / flag;

根据比例算出正比例的值

if( this_width < options.width ){
this_width = width;
}

if( this_height < options.height ){
this_height = options.height;
}

预防值不够做的强制，不过会有点小拉伸

$this.css({ width: this_width, height: this_height});

赋值

var iTop = (this_height - options.height) * 0.3,
　　iLeft = (this_width - options.width) * 0.5;

求出偏移量

if ( old_width < old_height ) {

　　$this.css('margin-left', '0px');
　　$this.css('margin-top', '-' + iTop + 'px');

}else if( old_width > old_height ) {

　　$this.css('margin-left', '-' + iLeft + 'px');
　　$this.css('margin-top', 0);

}else{

　　$this.css('margin-left', 0);
　　$this.css('margin-top', 0);

}

赋值偏移量

$this.fadeIn();

渐显图片

 

posted @ 2015-11-10 17:55  uustoboy  阅读(301)  评论(0)    收藏  举报