> 웹 프론트엔드 > HTML 튜토리얼 > JavaScript实现自适应窗口大小的网页_html/css_WEB-ITnose

JavaScript实现自适应窗口大小的网页_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 08:54:22
원래의
1456명이 탐색했습니다.

  1. Login
  2. body{
  3. text-align: left;
  4. background-color: F6F6F6;
  5. background-attachment: fixed;
  6. }
  7. #imgcenter{
  8. position:relative;
  9. height: auto;
  10. width:50%;
  11. left:20%;
  12. top:250px;
  13. }
  14. #center{
  15. position:relative;
  16. height: auto;
  17. width:50%;
  18. left:20%;
  19. top:220px;
  20. }
  21. #account{
  22. position:relative;
  23. height: auto;
  24. left:60%;
  25. top:-110px;
  26. padding:2%;
  27. width:50%;
  28. }
  29. #pwd{
  30. position:relative;
  31. height: auto;
  32. left:60%;
  33. top:-100px;
  34. padding:2%;
  35. width: 50%;
  36. }
  37. #login{
  38. position:relative;
  39. height: auto;
  40. left:60%;
  41. top:-95px;
  42. padding:1%;
  43. width: 25%;
  44. }
  45. #logo{
  46. padding:3%;
  47. width: 50%;
  48. height: auto;
  49. }
  50. #div_forgetpwd{
  51. position:relative;
  52. height: 30%;
  53. left: 90%;
  54. top:-115px;
  55. width: 25%;
  56. font-size: 1pt;
  57. white-space:nowrap;
  58. }
  59. #div_forgetpwd a{
  60. text-decoration: none;
  61. margin: auto;
  62. }
  63. #div_forgetpwd a:hover{
  64. text-decoration: underline;
  65. margin: auto;
  66. }
  67. .Clew{
  68. position:relative;
  69. height: 15px;
  70. left:-10%;
  71. top:-80%;
  72. padding:2% 50%;
  73. white-space:nowrap;
  74. color: #FFFFD5;
  75. font-weight: bold;
  76. font-family: century gothic, arial;
  77. background: #FCBE47;
  78. border-top: 2px solid #db6e3c;
  79. border-bottom: 2px solid #db6e3c;
  80. }
  81. //error clew
  82. var userFlag=0;
  83. var pwdFlag=0;
  84. $().ready(function() {
  85. $("form :input").blur(function() {
  86. var $parent = $(this).parent();
  87. $parent.find(".clew").remove();
  88. if($(this).is(".username")) {
  89. if(this.value=="" || this.value.length
  90. var errorMsg = "Please enter your account.";
  91. $parent.append(""+errorMsg+"");
  92. }else
  93. userFlag=1;
  94. }
  95. if($(this).is(".password")) {
  96. if(this.value=="" || this.value.length
  97. var errorMsg = "Please enter your password.";
  98. $parent.append(""+errorMsg+"");
  99. }else
  100. pwdFlag=1;
  101. }
  102. }).keyup(function() {
  103. $(this).triggerHandler("blur");
  104. }).focus(function() {
  105. $(this).triggerHandler("blur");
  106. });
  107. });
  108. //提交检验
  109. function validate_form(thisform){
  110. with (thisform){
  111. if (userFlag==0||pwdFlag==0){
  112. username.focus();
  113. return false;
  114. }
  115. }
  116. }
  • class="username">


  • 注册帐号
  • 忘记密码
  • //更改元素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
  • setSizeMini();
  • else if(420
  • setSizeMid();
  • else if(595
  • set();
  • else
  • reSet();
  • }
  • findDimensions();
  • //调用函数,获取数值
  • window.onresize=findDimensions;
  • 관련 라벨:
    원천:php.cn
    이전 기사:用electron写桌面应用_html/css_WEB-ITnose 다음 기사:iOS UIView动画实践(五):Keyframe Animation_html/css_WEB-ITnose
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿