网页特效

漂亮网站后台登录模板+jquey背景图片满屏100%显示jquery.ez-bg-resize.js

位置:首页 > 网页特效 > 窗口特效,2018-03-09 15:54
网页后面登录模板代码,这是jquery css背景图片满屏100%显示插件jquery.ez-bg-resize.js使用方法,让网页背景图片自适应100%显示

css背景图片满屏(图0)


<!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=UTF-8">
	<title>漂亮网站后台登录模板+jquey背景图片满屏100%显示</title>
<link rel="stylesheet" href="files/css.css">
<style>
body,button,form,input,li,p,ul{margin:0;padding:0}
body,input{font:14px/1 "Microsoft YaHei","微软雅黑","Microsoft JhengHei","STHeiti,MingLiu"}
dl,li,ol,ul{list-style:none}
a{text-decoration:none}
a:focus,a:hover{text-decoration:none}
img{border:0}
button,input,select,textarea{font-size:100%}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
* html .clearfix{height:1%}
.clearfix{display:block}
a{text-decoration:none;color:#333;transition:all .2s ease-in-out 0s}
a:hover{text-decoration:none;color:#3d74eb}
.link{color:#0063d5;}
a:hover.link{text-decoration:underline;}
.fl{float:left}
.fr{float:right}
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0px; height:0px }
body{background:#f2f2f2}
body::-webkit-scrollbar{width:0;height:0}
html{width:100%;height:100%;}
body{width:100%;height:100%;text-align:center;overflow:hidden;position:relative;}
.content{position:absolute;top:50%;left:50%;z-index:2;
background:#fff; 
border: 1px solid #eee;
-moz-border-radius: 15px;      /* Gecko browsers */
-webkit-border-radius: 15px;   /* Webkit browsers */
border-radius:15px;  
width:400px;height:300px;margin-left:-200px;margin-top:-150px;

} 
.divm{margin:10px;height:45px;} 
.logintop{color:#ccc;voerflow:hidden;height:45px;line-height:45px;text-align:center;font-size:18pt;font-family:"微软雅黑";  }
.inputtext{display:block;width:90%;margin:auto; height:35px; line-height:35px;
font-size:15pt;  
                border-radius:5px;/*设置圆角样式*/  
                border:1px solid #ccc;  
                padding-left:8px;  
                color:#3c3939;
                background:#fff;;
}
#loginerror{text-align:center;color:#ff0000}
.but{ -moz-border-radius: 5px;      /* Gecko browsers */
    -webkit-border-radius: 5px;   /* Webkit browsers */
    border-radius:5px; 
    font-size:15pt;font-family:"微软雅黑";
    width:90%;margin:auto;height:45px;border:0px;background:#ccc;color:#3c3939;text-align:center;line-height:45px;cursor:pointer;display:block;}
.but:hover{background:#eee;}



</style>

</head>
<body>


<div class="content"> 
<div class="logintop">Login Systems</div> 
<form name="Login" action="" method="post" target="_parent" id="login_form" onSubmit="return login()">
<div class="divm" style="margin-top:30px;"><input placeholder="count" type="text" name="title" id="logintitle" maxlength="40" class="inputtext"/></div>
<div  class="divm"><input id="loginpwd" placeholder="password" type="password" maxlength="40" name="password" id="" class="inputtext"/></div>
<div  class="divm" style="height:20px;line-height:20px;font-size:12px;" id="loginerror"></div>
<div  class="divm"><input type="button" value="登&nbsp;&nbsp;&nbsp;录" onclick="javascript:login()" class="but"/></div>
</form>
<div> 


<script type="text/javascript" src="files/jquery-1.7.min.js"></script>
<script type="text/javascript" src="files/jquery.ez-bg-resize.js"></script>

<script>

$(document).ready(function() {
	$("body").ezBgResize({
		img     : "files/loginbg.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.
	});
});



$(window).resize(function(){
imgsize();
}); 

function ajax_post(the_url,the_param,succ_callback){
    	jQuery.ajax({
    		type	: 'POST',
    		timeout : 20000, //超时时间设置,单位毫秒
    		cache	: false,
    		url	: the_url,
    		data	: the_param,
    		success	: succ_callback,
    		error	: function(html){
    		},
    	complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
     if(status=='timeout'){//超时
alert("请求超时,请刷新页面重试");
document.location.reload();
      }
         }
	
    		
    	});
    }

 
function login(){
var ob=$("#ob");
$("#loginerror").html("登录中...");
var title=$("#logintitle").attr("value");
var pwd=$("#loginpwd").attr("value");
var message="";
var check=true;
if(title==""||pwd==""){
message="用户名和密码不能为空";
check=false;
}
 if(check){
if(ob.value!="稍等..."){
 ob.value="稍等...";
ajax_post("",$('#login_form').serializeArray(),function(html){
ob.value="登录";
if(html.indexOf("失败") > 0 )
{
$("#loginerror").html(html);
}
else{
//alert("登录成功");
  //document.location.href="http://www.ablanxue.com/"
}
});
    	}
    	else{
    	alert("数据提交中...");
    	}
    	}
    	else{
    	$("#loginerror").html(message);
    	}
    }  

</script>
</body>
</html>


TAGS:css背景图片满屏

猜你喜欢

本月热门的内容

最近更新的内容

NewHot