JavaScript实现自适应窗口大小的网页

chars-d 2016-04-21 14:43:30 浏览198 评论0

摘要：

Login

body{

text-align: left;

background-color: F6F6F6;

background-attachment: fixed;

}

#imgcenter{

position:relative;

height: auto;

width:50%;

left:20%;

top:250px;

}

#center{

position:relative;

height: auto;

width:50%;

left:20%;

top:220px;

}

#account{

position:relative;

height: auto;

left:60%;

top:-110px;

padding:2%;

width:50%;

}

#pwd{

position:relative;

height: auto;

left:60%;

top:-100px;

padding:2%;

width: 50%;

}

#login{

position:relative;

height: auto;

left:60%;

top:-95px;

padding:1%;

width: 25%;

}

#logo{

padding:3%;

width: 50%;

height: auto;

}

#div_forgetpwd{

position:relative;

height: 30%;

left: 90%;

top:-115px;

width: 25%;

font-size: 1pt;

white-space:nowrap;

}

#div_forgetpwd a{

text-decoration: none;

margin: auto;

}

#div_forgetpwd a:hover{

text-decoration: underline;

margin: auto;

}

.Clew{

position:relative;

height: 15px;

left:-10%;

top:-80%;

padding:2% 50%;

white-space:nowrap;

color: #FFFFD5;

font-weight: bold;

font-family: century gothic, arial;

background: #FCBE47;

border-top: 2px solid #db6e3c;

border-bottom: 2px solid #db6e3c;

}

//error clew

var userFlag=0;

var pwdFlag=0;

$().ready(function() {

$("form :input").blur(function() {

var $parent = $(this).parent();

$parent.find(".clew").remove();

if($(this).is(".username")) {

if(this.value=="" || this.value.length < 0) {

var errorMsg = "Please enter your account.";

$parent.append(""+errorMsg+"");

}else

userFlag=1;

}

if($(this).is(".password")) {

if(this.value=="" || this.value.length < 0) {

var errorMsg = "Please enter your password.";

$parent.append(""+errorMsg+"");

}else

pwdFlag=1;

}

}).keyup(function() {

$(this).triggerHandler("blur");

}).focus(function() {

$(this).triggerHandler("blur");

});

});

//提交检验

function validate_form(thisform){

with (thisform){

if (userFlag==0||pwdFlag==0){

username.focus();

return false;

}

}

}

//更改元素CSS属性

function set(){

var setImgDiv = document.getElementById("imgcenter");

setImgDiv.style.top = "150px";

setImgDiv.style.left = "36%";

var setTextDiv = document.getElementById("center");

setTextDiv.style.top = "280px";

setTextDiv.style.left = "8%";

var setLogo=document.getElementById("logo");

setLogo.style.height="100px";

setLogo.style.width="240px";

var setAccount=document.getElementById("account");

setAccount.style.height="15px";

setAccount.style.width="240px";

var setPwd=document.getElementById("pwd");

setPwd.style.height="15px";

setPwd.style.width="240px";

var setLogin=document.getElementById("login");

setLogin.style.height="25px";

setLogin.style.width="100px";

var setForgetPwd=document.getElementById("div_forgetpwd");

setForgetPwd.style.width="100px";

setForgetPwd.style.left="100%";

}

function reSet(){

var reSetImgDiv = document.getElementById("imgcenter");

reSetImgDiv.style.top = "250px";

reSetImgDiv.style.left = "20%";

var reSetTextDiv = document.getElementById("center");

reSetTextDiv.style.top = "220px";

reSetTextDiv.style.left = "20%";

var reSetLogo=document.getElementById("logo");

reSetLogo.style.height="auto";

reSetLogo.style.width="50%";

var reSetAccount=document.getElementById("account");

reSetAccount.style.height="auto";

reSetAccount.style.width="50%";

var reSetPwd=document.getElementById("pwd");

reSetPwd.style.height="auto";

reSetPwd.style.width="50%";

var reSetLogin=document.getElementById("login");

reSetLogin.style.height="auto";

reSetLogin.style.width="25%";

var reSetForgetPwd=document.getElementById("div_forgetpwd");

reSetForgetPwd.style.width="100px";

reSetForgetPwd.style.left="90%";

}

function setSizeMid(){

var setSizeMidImgDiv = document.getElementById("imgcenter");

setSizeMidImgDiv.style.top = "150px";

setSizeMidImgDiv.style.left = "22%";

var setSizeMidTextDiv = document.getElementById("center");

setSizeMidTextDiv.style.top = "280px";

setSizeMidTextDiv.style.left = "-35px";

var setSizeMidLogo=document.getElementById("logo");

setSizeMidLogo.style.height="100px";

setSizeMidLogo.style.width="240px";

var setSizeMidAccount=document.getElementById("account");

setSizeMidAccount.style.height="15px";

setSizeMidAccount.style.width="240px";

var setSizeMidPwd=document.getElementById("pwd");

setSizeMidPwd.style.height="15px";

setSizeMidPwd.style.width="240px";

var setSizeMidLogin=document.getElementById("login");

setSizeMidLogin.style.height="25px";

setSizeMidLogin.style.width="80px";

var setSizeMidForgetPwd=document.getElementById("div_forgetpwd");

setSizeMidForgetPwd.style.width="80px";

setSizeMidForgetPwd.style.left="110%";

}

function setSizeMini(){

var setSizeMiniImgDiv = document.getElementById("imgcenter");

setSizeMiniImgDiv.style.top = "150px";

setSizeMiniImgDiv.style.left = "6%";

var setSizeMiniTextDiv = document.getElementById("center");

setSizeMiniTextDiv.style.top = "280px";

setSizeMiniTextDiv.style.left = "-60px";

var setSizeMiniLogo=document.getElementById("logo");

setSizeMiniLogo.style.height="100px";

setSizeMiniLogo.style.width="240px";

var setSizeMiniAccount=document.getElementById("account");

setSizeMiniAccount.style.height="15px";

setSizeMiniAccount.style.width="240px";

var setSizeMiniPwd=document.getElementById("pwd");

setSizeMiniPwd.style.height="15px";

setSizeMiniPwd.style.width="240px";

var setSizeMiniLogin=document.getElementById("login");

setSizeMiniLogin.style.height="25px";

setSizeMiniLogin.style.width="80px";

var setSizeMiniForgetPwd=document.getElementById("div_forgetpwd");

setSizeMiniForgetPwd.style.width="80px";

setSizeMiniForgetPwd.style.left="125%";

}

//获取当前窗口尺寸

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数：获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

if(winWidth<420||winHeight<537)

setSizeMini();

else if(420<=winWidth&&winWidth<=595)

setSizeMid();

else if(595

set();

else

reSet();

}

findDimensions();

//调用函数，获取数值

window.οnresize=findDimensions;