Jquery 全屏背景图类

(function(){
//作用域定义
	var xproject = this.xproject || function(){};
	
	this.xproject = xproject;
	/*
	* @description全屏背景图类 xproject.fullBackBround({ bgImg : 'images/2014022709240529.jpg'});
	* @param args
	* {
	*	$layer : jQuery 容器
	*   bgImg : String, //背景图片地址url,默认null  
	*	zIndex : int //z-index值,默认-1
	* }
	*/
	xproject.fullBackBround = function(args){
	
		var $layer = args.$layer || $('body'),
			
			$bg = $('<div class="full-bg" style="overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;"></div>').appendTo($layer);
	
		full();

		function full(){
		
			if(args && typeof args == 'object'){

				if(args.zIndex){
				
					$bg.css('z-index', args.zIndex);
				
				}
			
				if(args.bgImg){
				
					var img = new Image();

					img.src = args.bgImg;

					if(img.complete){
					
						complete.call(img);
					
					}else img.onload = function(){

						complete.call(this, this.height / this.width);
					
					};
				
				}
			
			}
	
		}

		function complete(per){

			var width = parseInt($bg.width()),
				
				height = parseInt($bg.height()),
					
				norPer = height / width;
		
			per = per || this.height / this.width;

			if(per > norPer){
			
				height = Math.round(width * per);
			
			}else if(norPer > per){
			
				width = Math.round(height / per);
			
			}

			this.width = width;

			this.height = height;
			
			$bg.empty().append($(this));
		
		}

		$(window).on({
		
			resize : function(){
			
				full();
			
			}
		
		});

		return {
		
			//移除
			remove : function(){
			
				$bg.remove();
			
			},

			//获取页面元素
			getLayer : function(){
			
				return $bg
			
			},

			//显示
			show : function(){
			
				$bg.fadeIn('fast');
			
			},

			//隐藏
			hide : function(){
			
				$bg.fadeOut('fast');
			
			},

			//根据页面重置大小
			resize : function(){
			
				full();
			
			},

			//改变地址
			changeUrl : function(url){
			
				args.bgImg = url;

				full();
			
			}
		
		};

	};
	
})();

 how2use

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

 

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值