Heim > Web-Frontend > HTML-Tutorial > JavaScript实现自适应窗口大小的网页_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 08:54:22
Original
1454 Leute haben es durchsucht

  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;
  • Verwandte Etiketten:
    Quelle:php.cn
    Vorheriger Artikel:用electron写桌面应用_html/css_WEB-ITnose Nächster Artikel:iOS UIView动画实践(五):Keyframe Animation_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage