JS图片背景全屏代码

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

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

以下是 JS图片背景全屏代码的示例演示效果:

当前平台(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" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为JS图片背景全屏代码，属于站长常用代码" />
<title>JS图片背景全屏代码</title>
<link href="css/lrtk.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码开始 -->
<div class="lay_wrap" id="lay">
	<div class="lay_main">
		<div class="lay_inner">
			<div class="login_img">
				<span class="img_slogan"></span>
			</div>
		</div>
	</div>
</div>
<div class="lay_background" id="lay_bg">
	<img class="lay_background_img lay_background_img_fade_out" id="lay_bg_img" src="images/1.jpg">
</div>		
<script type="text/javascript" src="js/js.js"></script>	
</body>
</html>

JS代码(js.js):

// JavaScript Documentvar bg_img = $('lay_bg_img'),bgArr = [];
	for(var i = 0,len = p_bgPic.length;
	i < len;
	i++){
	if(p_bgPic[i].length > 0){
	bgArr.push(p_bgPic[i]);
}
}
var bg_Data = bgArr[Math.floor(Math.random() * (bgArr.length))],bg_type = bg_Data[0],ft_col = bg_Data[2] || 0;
	window.QZFL = window.QZONE = window.QZFL || window.QZONE ||{
}
;
	QZFL.dom ={
	getById:function(id){
	return document.getElementById(id);
}
,getClientHeight:function(doc){
	var _doc = doc || document;
	return _doc.compatMode == "CSS1Compat"?_doc.documentElement.clientHeight:_doc.body.clientHeight;
}
,getClientWidth:function(doc){
	var _doc = doc || document;
	return _doc.compatMode == "CSS1Compat"?_doc.documentElement.clientWidth:_doc.body.clientWidth;
}
}
;
	QZFL.css ={
	_reClassToken:/\s+/,addClassName:function(elem,names){
	var _s = QZFL.css;
	return names && ((elem && elem.classList && !_s._reClassToken.test(names))?elem.classList.add(names):_s.updateClassName(elem,null,names));
}
,removeClassName:function(elem,names){
	var _s = QZFL.css;
	return names && ((elem && elem.classList && !_s._reClassToken.test(names))?elem.classList.remove(names):_s.updateClassName(elem,names));
}
,updateClassName:function(elem,removeNames,addNames){
	if(!elem || elem.nodeType != 1){
	return "";
}
var oriName = elem.className,_s = QZFL.css,ar,b;
	if(removeNames && typeof(removeNames) == 'string' || addNames && typeof(addNames) == 'string'){
	if(removeNames == '*'){
	oriName = '';
}
else{
	ar = oriName.split(_s._reClassToken);
	var i = 0,l = ar.length,n;
	oriName ={
}
;
	for(;
	i < l;
	++i){
	ar[i] && (oriName[ar[i]] = true);
}
if(addNames){
	ar = addNames.split(_s._reClassToken);
	l = ar.length;
	for(i = 0;
	i < l;
	++i){
	(n = ar[i]) && !oriName[n] && (b = oriName[n] = true);
}
}
if(removeNames){
	ar = removeNames.split(_s._reClassToken);
	l = ar.length;
	for(i = 0;
	i < l;
	i++){
	(n = ar[i]) && oriName[n] && (b = true) && delete oriName[n];
}
}
}
if(b){
	ar.length = 0;
	for(var k in oriName){
	ar.push(k);
}
oriName = ar.join(' ');
	elem.className = oriName;
}
}
return oriName;
}
}
;
	if(!window.$){
	var $ = QZFL.dom.getById;
}
QZONE.LoginPage ={
	bootStrap:function(){
	var lp = QZONE.LoginPage,sl_url = $('small_url');
	if(bg_type == 0){
	QZFL.css.addClassName(document.body,'mode_dark');
}
bg_img.onload = function(){
	QZFL.css.addClassName(bg_img,'lay_background_img_fade_out');
	lp.resizeBackground();
}
window.onload = function(){
	lp.resizeBackground();
	lp.setLoginDivTop();
}
;
	TCISD.pv('ihome.qzone.qq.com','login/i');
}
,resizeBackground:function(){
	var bg = $('lay_bg'),bg_img = $('lay_bg_img'),cw = QZFL.dom.getClientWidth(),ch = QZFL.dom.getClientHeight(),iw = bg_img.width,ih = bg_img.height;
	bg.style.width = cw + "px";
	bg.style.height = ch + "px";
	if(cw / ch > iw / ih){
	var new_h = cw * ih / iw,imgTop = (ch - new_h) / 2;
	bg_img.style.width = cw + "px";
	bg_img.style.height = new_h + "px";
	bg_img.style.top = imgTop + "px";
	bg_img.style.left = "";
}
else{
	var new_w = ch * iw / ih,imgLeft = (cw - new_w) / 2;
	bg_img.style.width = new_w + "px";
	bg_img.style.height = ch + "px";
	bg_img.style.left = imgLeft + "px";
	bg_img.style.top = "";
}
}
,setLoginDivTop:function(){
	var dom_height = QZFL.dom.getClientHeight();
	if(window.ActiveXObject && (navigator.userAgent.indexOf('MSIE 6.0') > -1) && dom_height < 600){
	$('lay').style.height = '600px';
}
else{
	$('lay').style.height = '';
}
if(dom_height < 820){
	var y1 = 820 - dom_height,change_top = 100 - y1,change_top = change_top > 0?change_top:0;
	$('login_div').style.top = change_top + "px";
}
else{
	$('login_div').style.top = "100px";
}
}
}
;
	QZONE.LoginPage.bootStrap();

JS代码(lrtk.js):

var p_bgPic=[[0]].slice(0);
	//防抖！function voidShaking(){
	var dom_height =document.documentElement.clientHeight,login_div_top;
	if(dom_height < 820){
	var change_top = 100 - (820 - dom_height),change_top = change_top > 0?change_top:0;
	login_div_top = change_top + "px";
}
else{
	login_div_top = "100px";
}
document.write('<style>#login_div{
	top:' + login_div_top + '}
</style>');
}
voidShaking();
	//防嵌入function getType(obj){
	return obj === null?'null':(obj === undefined?'undefined':Object.prototype.toString.call(obj).slice(8,-1).toLowerCase());
}
;
	function $(id){
	return document.getElementById(id);
}

CSS代码(lrtk.css):

*{margin:0;padding:0}
.img_slogan{display:block;width:450px;height:235px;background:url(../images/slogan_dark.png) no-repeat;_background:url(../images/slogan_dark_ie6.png) no-repeat;}
.lay_wrap{color:#4b4a4a;height:100%;position:relative;min-height:600px}
.lay_wrap a{color:#4b4a4a}
.lay_wrap a:hover{text-decoration:underline}
.lay_wrap .lay_inner{width:750px;margin:0 auto;position:relative}
.lay_wrap .lay_main{color:#4b4a4a;position:absolute;top:10%;width:100%;_top:50px;}
.lay_wrap .lay_main a{color:#4b4a4a}
.lay_wrap .lay_main .login_head{margin-bottom:50px}
.lay_wrap .lay_main .login_img{float:left;width:450px;overflow:hidden;height:235px}
.lay_background{position:absolute;left:0;top:0;z-index:-1;overflow:hidden}
.lay_background .lay_background_img{position:absolute;left:0;top:0;z-index:-1}
.lay_background .lay_background_img{opacity:0;-webkit-transition:opacity .8s ease;-moz-transition:opacity .8s ease;transition:opacity .8s ease}
.lay_background .lay_background_img_fade_out{opacity:1}

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