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

开发者社区> 航空母舰> 正文

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(thisthis.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);  

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

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26794 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2962 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11819 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4660 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7503 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22408 0
+关注
514
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载