jQuery整屏背景平铺固定代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery整屏背景平铺固定代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery��������ƽ�̶̹�����</title>
<link rel="stylesheet" href="css/lib.css" type="text/css" media="screen" title="no title" charset="utf-8">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ez-bg-resize.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("body").ezBgResize({
		img     : "image/bg.jpg", // Relative path example.  You could also use an absolute url (http://...).
		opacity : 1, // Opacity. 1 = 100%.  This is optional.
		center  : true // Boolean (true or false). This is optional. Default is true.
	});
});
</script>

</head>
<body>

<div id="container">		
	<p class="code">
		$.ezBgResize({<br />
			&nbsp;&nbsp;&nbsp;&nbsp;img      : "image/bg.jpg", // Required.<br />
			&nbsp;&nbsp;&nbsp;&nbsp;opacity  : 1, // Optional. Default is 100% (1).<br />
			&nbsp;&nbsp;&nbsp;&nbsp;center   : true // Optional. Default is true.<br />
		});
	</p>
</div>
</body>
</html>

JS代码(jquery.ez-bg-resize.js):

/****************************************************** * jQuery plug-in * Easy Background Image Resizer * Developed by J.P. Given (http://johnpatrickgiven.com) * Useage:anyone so long as credit is left alone******************************************************/
(function($){
	// Global Namespace var jqez ={
}
;
	// Define the plugin $.fn.ezBgResize = function(options){
	// Set global to obj passedjqez = options;
	// If img option is string convert to array.// This is in preparation for accepting an slideshow of images.if (!$.isArray(jqez.img)){
	var tmp_img = jqez.img;
	jqez.img = [tmp_img]}
$("<img/>").attr("src",jqez.img).load(function(){
	jqez.width = this.width;
	jqez.height = this.height;
	// Create a unique div container$("body").append('<div id="jq_ez_bg"></div>');
	// Add the image to it.$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
	// First position object $("#jq_ez_bg").css("visibility","hidden");
	// Overflow set to hidden so scroll bars don't mess up image size. $("body").css({
	"overflow":"hidden"}
);
	resizeImage();
}
);
}
;
	$(window).bind("resize",function(){
	resizeImage();
}
);
	// Actual resize function function resizeImage(){
	$("#jq_ez_bg").css({
	"position":"fixed","top":"0px","left":"0px","z-index":"-1","overflow":"hidden","width":$(window).width() + "px","height":$(window).height() + "px","opacity":jqez.opacity}
);
	// Image relative to its container$("#jq_ez_bg").children('img').css("position","relative");
	// Resize the img object to the proper ratio of the window. var iw = $("#jq_ez_bg").children('img').width();
	var ih = $("#jq_ez_bg").children('img').height();
	if ($(window).width() > $(window).height()){
	//console.log(iw,ih);
	if (iw > ih){
	var fRatio = iw/ih;
	$("#jq_ez_bg").children('img').css("width",$(window).width() + "px");
	$("#jq_ez_bg").children('img').css("height",Math.round($(window).width() * (1/fRatio)));
	var newIh = Math.round($(window).width() * (1/fRatio));
	if(newIh < $(window).height()){
	var fRatio = ih/iw;
	$("#jq_ez_bg").children('img').css("height",$(window).height());
	$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
}
else{
	var fRatio = ih/iw;
	$("#jq_ez_bg").children('img').css("height",$(window).height());
	$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
}
else{
	var fRatio = ih/iw;
	$("#jq_ez_bg").children('img').css("height",$(window).height());
	$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the imageif (typeof(jqez.center) == 'undefined' || jqez.center){
	if ($("#jq_ez_bg").children('img').width() > $(window).width()){
	var this_left = ($("#jq_ez_bg").children('img').width() - $(window).width()) / 2;
	$("#jq_ez_bg").children('img').css({
	"top":0,"left":-this_left}
);
}
if ($("#jq_ez_bg").children('img').height() > $(window).height()){
	var this_height = ($("#jq_ez_bg").children('img').height() - $(window).height()) / 2;
	$("#jq_ez_bg").children('img').css({
	"left":0,"top":-this_height}
);
}
}
$("#jq_ez_bg").css({
	"visibility":"visible"}
);
	// Allow scrolling again$("body").css({
	"overflow":"auto"}
);
}
}
)(jQuery);

CSS代码(lib.css):

body{font-family:Georgia,"Times New Roman",Times,serif;font-size:20px;font-style:italic;color:#333;padding:0px;margin:0px;}
a{color:#333;text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
#container{margin-left:100px;width:400px;text-align:center;padding:50px;background-color:#f5f5f5;/* border:10px solid #012702;*/
filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;}
.credit{font-size:1.5em;}
.code{font-size:0.5em;padding:20px;background-color:#000;text-align:left;color:#01b0f0;font-family:Verdana;font-style:normal;}
.title{color:#01b0f0;text-align:left;}
.left{text-align:left;}
.download{border:1px solid #333;padding:20px;font-size:1.5em;}
.grey{color:#666;}
#credit{position:fixed;top:8px;right:8px;float:right;font-size:10px;font-family:Verdana;line-height:18px;background-color:#f5f5f5;/* border:10px solid #012702;*/
filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;padding:5px;}
#credit a{color:#01b0f0;text-decoration:underline;}
#twt{position:absolute;top:24px;left:214px;z-index:5000;}

附件:下载该文件资源,减少时间成本(增值服务)