全屏登录窗口随窗口的缩放而缩放-优快云博客

本文介绍了一种使用JavaScript和CSS解决大图片登录窗口居中并随窗口缩放对称缩放的方法，包括HTML结构、CSS样式及关键的JavaScript逻辑，附带运行效果截图。

2019独角兽企业重金招聘Python工程师标准>>>

以前切片时做的登录窗口一般都是800*600这样大小的登录窗口，所以在各个浏览器上都可以居中，而且其周围的背景都是单一的颜色，而现在如果有一张图片很大（比如1440*900），那么怎么让他在整个屏幕中居中，而且可以随着窗口的缩放而对称缩放的，这个问题困扰了我好久，终于在前两天别我解决了，所以不忘在此与各位分享，希望让遇到同样情况的网友可以有个解决方案。由于图片太大上传不了

解决方法如下：这里主要用js加上css中的绝对定位来实现的，

前台页面的html代码如下

<!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>
 <link href="css/login.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="js/login.js" type="text/javascript"></script>
<style type="text/css">
        .divbg
        {
            height: 900px;
            overflow: hidden;
            background-image: url('Image/loginbg.jpg');
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            
        }
        html
        {
            padding: 0px;
            margin: 0px;
        }
        html
        {
            overflow: visible;
        }
        body
        {
           padding: 0px;
            margin: 0px;
            overflow: hidden;
            position: relative;
            background-color: White;
  
        }
        .login
        {
            position: absolute;
           
        }
        .login ul
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .login ul li
        {
            margin-top: 5px;
        }
       
        input.text-input
        {
            height: 26px;
            width: 179px;
            background: url(Image/kuang.jpg) no-repeat 0 0;
            padding-left: 3px;
            text-align: left;
            border: none;
            line-height: 26px;
            *line-height:26px;
            _line-height:26px;
            overflow: hidden;
            over-flow: hidden;
        }
    </style>
</head>
 <body>
    <div class="divbg" style="background-color: White;">
        <div class="login">
            <ul>
                <li>
                    <input id="TBUsername" class="text-input" maxlength="20" value=""/>
                </li>
                <li>
                    <input type="password" id="TBPassword" class="text-input" maxlength="20" value=""/>
                </li>
                
                <li style="padding-left:20px;padding-top:10px;*padding-top:-30px; _padding-top:-30px; ">
                    <img id="imgok" src="Image/OK.jpg" style="width: 61px;
                        height: 22px; border: 0px; cursor: pointer;">
                    <img id="imgcancel" src="Image/Cancle.jpg" style="width: 61px; height: 22px;
                        border: 0px; cursor: pointer;">
                </li>
            </ul>
        </div>
    </div>
 </body>
</html>

下面我把js贴出来

$(document).ready(function() {
    var screenwidth, screenheight, mytop, getPosLeft, getPosTop
    screenwidth = $(window).width();
    screenheight = $(window).height();
    //获取滚动条距顶部的偏移
    mytop = $(document).scrollTop();
    //计算弹出层的left

    //应该一直是满屏的所以getPosLeft，getPosTop一直为0
    getPosLeft = 0;
    //计算弹出层的top
    getPosTop = 0;
    //css定位弹出层
    $(".divbg").css({ "left": getPosLeft, "top": getPosTop });

    //这里240,393，是相对于我图片上登录部分相对于图片左边和顶部的绝对距离
    $(".login").css({ "left": screenwidth/2-240, "top":393});
    //当浏览器窗口大小改变时
    $(window).resize(function() {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = 0;
        getPosTop = 0;
        $(".divbg").css({ "left": getPosLeft, "top": getPosTop});
        $(".login").css({ "left": screenwidth/2-240, "top": 393});
    });
    //当拉动滚动条时，弹出层跟着移动
    $(window).scroll(function() {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = 0;
        getPosTop = 0;
        $(".divbg").css({ "left": getPosLeft, "top": getPosTop });
        $(".login").css({ "left": screenwidth/2-240, "top": 393});
    });


});

运行的效果截图如下：