Jquery 全屏背景图类-阿里云开发者社区

Jquery 全屏背景图类

2016-05-12 1268

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

+关注继续查看

Java代码  
(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

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