现在位置: 首页 > 程序设计 > 正文
A+

登录页面html+css+jquery实现背景图片和登录窗口自适应窗口大小

2个月前 程序设计 468 12

前段时间有个朋友问我的这个登录界面是怎么自适应的,实话说现在在用的这个其实不是真正的自适应,还是有蛮多的缺陷的,但既然问了,我就抽空完善了一下代码。

不要在我的网站上测试效果,因为在写这篇文章的时候我还没有改过来,也懒得去改,因为最近正在开发一个自己的后台框架,已经完工一半了,目前正在写ajax提交功能,所以可能没那么快,如果不阑尾的话,我想开发完毕之后我会免费发布出来!

好了,废话不多说,先来说一下怎么去自适应窗口吧

首先我这个登录界面是三段式的结构,页头 -  内容  - 页脚,我想大部分的都是这个结构吧。

既然是窗口自适应那么就一定要搞清楚当浏览器的窗口改变大小之后,要怎么去触发一个事件,这里我们需要jquery的一个事件代码来完成这个初步功能,即:

  1. $(window).resize(function(){
  2.       //代码
  3. });

有了这段代码我们其实就可以做很多事情了,当窗口改变的时候,我们只需要获取当前浏览器窗口的可视高度就可以了:

  1. $(window).height()

现在有了窗口改变的事件,又有了当前窗口的高度,那么接下来我们需要算出图片的div元素的实时高度,其实就是用浏览器的可视高度减去页头和页尾的高度就是内容页面的高度。

我们现在假设页头的Class是header-logo,页尾的Class是footer,那么代码就是这样写的:

  1. var e = $(this).height() - $(".header-logo").height() - $(".footer").height();

接下来再出一个判断,当获取到的高度小于多少的时候我们把高度固定成一个值,当大于多少的时候获取的高度跟随浏览器的高度同步。

  1. var e = $(this).height() - $(".header-logo").height() - $(".footer").height();
  2. if (e < 500)
  3. {
  4.     $(".header-images").css ("height"500);
  5. }else{
  6.     $(".header-images").css ("height", e);
  7. }

到这里基本上背景图片就可以跟窗口一起自适应调整大小了,但接下来还是要把html和CSS的代码给写完才能看到效果,我会贴上我写的代码给你们参考,但也只是仅限于参考,因为很多网站的结构和元素都不一样,若你一定要使用的话,那固定的这个高度你自己需要调节好,那就上代码吧!

  1. <!DOCTYPE html>
  2. <html lang = "zh">
  3. <head>
  4. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  5. <style>
  6. body{margin:0;padding:0;border:0;min-height:600px;}
  7. .header-logo {
  8.     max-height:70px;
  9.     min-height:70px;
  10.     height:70px;
  11.     width:100%;
  12.     box-shadow: 0 0 6px 1px rgba(0,0,0,.15);
  13. }
  14. .header-images{
  15.     background-repeat: no-repeat;
  16.     background-size: cover;
  17.     background-position: 50%;
  18. }
  19. .login-from {
  20.     width:600px;
  21.     margin: 0 auto
  22. }
  23. .content {
  24.     height:350px;
  25.     background: rgba(255,255,255,.85);
  26.     -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.15);
  27.     box-shadow: 0 0 6px 1px rgba(0,0,0,.15);
  28. }
  29. .footer {
  30.     height:120px;
  31.     max-height:120px;
  32.     min-height:120px;
  33.     width:100%;
  34.     box-shadow: 0 0 6px 1px rgba(0,0,0,.15);
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div id="main" class="main">
  40.     <div class="header-logo"></div>
  41.     <div class="header-images" style="background-image:url('../images/background.jpg')">
  42.         <div class="login-from">
  43.             <div class="content">
  44.             </div>
  45.         </div>
  46.     </div>
  47.     <div class="footer"></div>
  48. </div>
  49. <script>
  50. $(document).ready(function()
  51. {
  52.     var h = $(window).height() - $(".header-logo").height() - $(".footer").height();
  53.     var z = (h - $(".login-from").height()) / 2;
  54.     if (h < 500)
  55.     {
  56.         $(".header-images").css ("height", 500);
  57.         $(".login-from").css ("padding-top",78);
  58.     }else{
  59.         $(".header-images").css ("height", h);
  60.         $(".login-from").css ("padding-top",z);
  61.     }
  62.     $(window).resize(function()
  63.     {
  64.         var e = $(this).height() - $(".header-logo").height() - $(".footer").height();
  65.         var m = (e - $(".login-from").height()) / 2;
  66.         if (e < 500)
  67.         {
  68.             $(".header-images").css ("height", 500);
  69.             $(".login-from").css ("padding-top",78);
  70.         }else{
  71.             $(".header-images").css ("height", e);
  72.             $(".login-from").css ("padding-top",m);
  73.         }
  74.     });
  75. });
  76. </script>
  77. </body>
  78. </html>

 

发表评论

评论列表 ( 有 468 次浏览 和 12 条评论 其中 访客有 0 条 博主有 0 条 )
  • 1个月前

    突然就博了下么,路过祝好。

    • 锋言锋语作者 谷歌浏览器 Windows 10
      @回复
      1个月前

      偶尔偶尔!

  • 2个月前

    这样的登陆界面还是挺漂亮的哈。

    • 锋言锋语作者 谷歌浏览器  V2001A
      @回复
      2个月前

      那就赶紧是试试!

  • 2个月前

    终于发了一贴了

    • 锋言锋语作者 谷歌浏览器 Windows 10
      @回复
      2个月前

      不容易啊!

      • 2个月前

        undefined你这回复提醒都没了吗

        • 锋言锋语作者 谷歌浏览器 Windows 10
          @回复
          2个月前

          刚刚看到你的消息,修复了,感谢提醒!

  • 2个月前

    向博主学习,研究下代码

    • 锋言锋语作者 谷歌浏览器 Windows 10
      @回复
      2个月前

      互相学习!

  • 2个月前

    登录页面就自己看的,感觉就不折腾了。

    • 锋言锋语作者 Safari浏览器 iPhone iPhone OS 14_2 like Mac OS X) AppleWebKit
      @回复
      2个月前

      哥哥,看得爽啊!

搜索