Jquery 全屏背景图类

Java代码  

1. (function(){  
2. //作用域定义  
3.     var xproject = this.xproject || function(){};  
4.       
5.     this.xproject = xproject;  
6.     /* 
7.     * @description全屏背景图类 xproject.fullBackBround({ bgImg : 'images/2014022709240529.jpg'}); 
8.     * @param args 
9.     * { 
10.     *   $layer : jQuery 容器 
11.     *   bgImg : String, //背景图片地址url,默认null   
12.     *   zIndex : int //z-index值,默认-1 
13.     * } 
14.     */  
15.     xproject.fullBackBround = function(args){  
16.       
17.         var $layer = args.$layer || $('body'),  
18.               
19.             $bg = $('<div class="full-bg" style="overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;"></div>').appendTo($layer);  
20.       
21.         full();  
22.   
23.         function full(){  
24.           
25.             if(args && typeof args == 'object'){  
26.   
27.                 if(args.zIndex){  
28.                   
29.                     $bg.css('z-index', args.zIndex);  
30.                   
31.                 }  
32.               
33.                 if(args.bgImg){  
34.                   
35.                     var img = new Image();  
36.   
37.                     img.src = args.bgImg;  
38.   
39.                     if(img.complete){  
40.                       
41.                         complete.call(img);  
42.                       
43.                     }else img.onload = function(){  
44.   
45.                         complete.call(this, this.height / this.width);  
46.                       
47.                     };  
48.                   
49.                 }  
50.               
51.             }  
52.       
53.         }  
54.   
55.         function complete(per){  
56.   
57.             var width = parseInt($bg.width()),  
58.                   
59.                 height = parseInt($bg.height()),  
60.                       
61.                 norPer = height / width;  
62.           
63.             per = per || this.height / this.width;  
64.   
65.             if(per > norPer){  
66.               
67.                 height = Math.round(width * per);  
68.               
69.             }else if(norPer > per){  
70.               
71.                 width = Math.round(height / per);  
72.               
73.             }  
74.   
75.             this.width = width;  
76.   
77.             this.height = height;  
78.               
79.             $bg.empty().append($(this));  
80.           
81.         }  
82.   
83.         $(window).on({  
84.           
85.             resize : function(){  
86.               
87.                 full();  
88.               
89.             }  
90.           
91.         });  
92.   
93.         return {  
94.           
95.             //移除  
96.             remove : function(){  
97.               
98.                 $bg.remove();  
99.               
100.             },  
101.   
102.             //获取页面元素  
103.             getLayer : function(){  
104.               
105.                 return $bg  
106.               
107.             },  
108.   
109.             //显示  
110.             show : function(){  
111.               
112.                 $bg.fadeIn('fast');  
113.               
114.             },  
115.   
116.             //隐藏  
117.             hide : function(){  
118.               
119.                 $bg.fadeOut('fast');  
120.               
121.             },  
122.   
123.             //根据页面重置大小  
124.             resize : function(){  
125.               
126.                 full();  
127.               
128.             },  
129.   
130.             //改变地址  
131.             changeUrl : function(url){  
132.               
133.                 args.bgImg = url;  
134.   
135.                 full();  
136.               
137.             }  
138.           
139.         };  
140.   
141.     };  
142.       
143. })();  

 how2use

Java代码  

1. if(!this.imgBg) this.imgBg = new xproject.fullBackBround({$layer : this.$layer, bgImg : imgUrl});  
2. this.imgBg.changeUrl(imgUrl);