冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)

登录框的设计的样式以及结构思路

这里写图片描述

在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这样就可以让其脱标,不会影响页面的内容,同时也要将登录框的盒子设置为定位属性,但是它的层级一定比cover-bg的层级高,这样就可以让遮罩层显示在下面,登录框在上面的样式.

HTML+CSS:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: #ccc;
        }
        /*登录页*/
        .login-box {
            float: left;
            color: #fff;
            font-size: 14px;
        }

        #cover-bg {
            position: absolute;
            display: block;
            left: -100px;
            top: 0px;
            opacity: 0.5;
            z-index: 998;
            /*与背景色比较*/
            background-color: red;
            width: 1920px;
            height: 1276px;
            z-index: 9;
            display: none;
        }

        .login-btn {
            position: relative;
            top: 30px;
            display: inline-block;
            width: 78px;
            height: 35px;
            line-height: 35px;
            padding-left: 30px;
            color: #fff;
            font-size: 14px;
            border-radius: 20px;
            border: 2px solid #fe9422;
            margin-left: 10px;
        }

        .login-people-icon {
            position: absolute;
            top: 11px;
            right: 24px;
            width: 9px;
            height: 13px;
            background: url(./images/header-spr.png);
            background-position: -248px 0;
        }

        #login-web {
            background-color: #fff;
            width: 618px;
            height: 364px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 20;
            text-align: center;
            /*display: none;*/
        }

        #login-web .login-header {
            height: 50px;
            width: 50px;
            position: absolute;
            top: 0;
            right: 0;
            font-family: "微软雅黑";
            z-index: 21;
        }

        #login-web .login-header .close {
            width: 47px;
            height: 20px;
            float: right;
            background: url('./images/icon_3_tiny.png') -221px -126px no-repeat;
        }

        #login-web .login-header .close:hover {
            background: url('./images/icon_3_tiny.png') -221px -151px no-repeat;
        }

        #login-web .login-qr .qr-box{
            position: relative;
        }

        #login-web .scan{
            opacity: 0;
            width: 160px;
            height: 198px;
            position: absolute;
            background: url("./images/small_24_tiny.png");
            top: 118px;
            left: 321px;
        }

        #login-web .login-title{
            font-family: helvetica,arial,微软雅黑,华文黑体;
            color: #333;
            font-size: 20px;
            width: 618px;
            height: 26px;
            margin-top: 36px;
            margin-bottom: 16px;
        }

        #login-web .login-tips {
            width: 618px;
            height: 42px;
            line-height: 21px;
            margin-bottom: 36px;
            color: #666;
            font-size: 16px;
        }

        .login-link a,.login-link span {
            display: inline !important;
        }

        #login-web .login-tips a {
            color: #3481cf;
        }

        #login-web .login-link {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #login-web .dotted {
            color: #bfbfbf;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <!--登录页 开始-->
    <div id="cover-bg"></div>
    <div class="login-box">
        <div class="unlogin" id="unlogin" style="display: block;">
            <a href="javascript:;" class="login-btn">登录<span class="login-people-icon"></span></a>
        </div>
        <div id="login-web">
            <div class="login-title">快速安全登录</div>
            <div class="login-tips">请使用<a href="#">QQ手机版</a>扫描二维码,<br>安全登录,防止盗号</div>
            <div class="login-qr">
                <div class="qr-box">
                    <img src="./images/loginqr" alt=""/>
                </div>
                <div class="scan">
                </div>
            </div>
            <div class="login-link">
                <a href="#">账号密码登陆</a><span class="dotted">|</span><a href="#">注册新账号</a><span class="dotted">|</span><a href="#">意见反馈</a>
            </div>
            <div class="login-header">
                <a href="javascript:;" class="close"></a>
            </div>
        </div>
    </div>
    <!--登录页结束-->
</body>

JS效果的实现:
需求:
1.当鼠标移入的时候显示cover-bg/login-web设置为显示
2.在利用jQuery里面的自定义动画来实现登录框里面两张图片之间的移动.
在我点击到二维码的图片上时,图片的left的属性左移,同时将手机扫码的图片显示出来,原来这张图片的opacity属性刚开始设置是0,但是当我移入的时候,属性变为1.整个过程都是有动画实现.

JS代码实现:

<script src='jquery-1.12.4.js'></script>
<script>
    $(function(){
        //点击登录打开页面
        $('#unlogin').on('click',function(){
            $('#login-web').show();
            $('#login-web').show();
        })

        //登录页关闭
        $('.login-header .close').on('click', function () {
            $('#cover-bg').hide();
            $('#login-web').hide();
        })

        //登录页动画
        $('#login-web .qr-box>img').on('mouseenter', function () {
            $('#login-web .qr-box').stop(true,false).animate({
                left:'-70px'
            },150,'swing', function () {
                $('#login-web .scan').stop(true,false).animate({
                    opacity:'1'
                },150,'swing')
            })
        })

        $('#login-web .qr-box>img').on('mouseleave', function () {
            $('#login-web .scan').stop(true,false).animate({
                opacity:'0'
            },150,'swing', function () {
                $('#login-web .qr-box').stop(true,false).animate({
                    left:'0'
                },150,'swing')
            })
        })
    })
</script>
</html>

这里写图片描述

最后就可以实现了.

冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)

猜你喜欢