jquery背景自适应浏览器大小js代码

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

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

以下是 jquery背景自适应浏览器大小js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery背景自适应浏览器大</title>
	<link rel="stylesheet" href="css/lib.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<!-- Google Hosted jQuery Core -->
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lib.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="container">
		<h1>jQuery Easy Background Resize</h1>
		<p>Resizable full-browser background image using jQuery.  Implementation requires no CSS.  Keeps the images aspect ratio in tact!</p>
		<p class="title">Example HTML for Background DIV</p>
		<p class="code">
			<span class="grey">&lt;!-- This gets positioned absolutely so place it anywhere. --&gt;</span><br />
			&lt;div id="body-background"&gt;&lt;img src="image/bg.jpg" alt="Bg"&gt;&lt;/div&gt;
		</p>
		<p class="title">Example Example jQuery Code</p>
		<p class="code">
			$(document).ready(function() {<br />
				&nbsp;&nbsp;&nbsp;&nbsp;$("#body-background").ezBgResize();<br />
			});
		</p>
		<p class="left">And that's it!  Well, other than including the proper jQuery and Easy Background Resize javascript files.</p>
		<p class="left">Hope you like it!</p>
	</div>
	
	<div id="body-background"><img src="image/bg.jpg" alt="Bg"></div>
</body>
</html>

JS代码(lib.js):

$(document).ready(function(){
	$("#body-background").ezBgResize();
}
);

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;}

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