• 网页预加载层效果(二)


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                background-color: #4cae4c;
                width:700px;
                height:600px;
            }
            .preloader{
                position:fixed;
                top:0;
                bottom:0;
                left:0;
                right:0;
                z-index:999;
                height:100%;
                width:100%;
                background-color: #fefefe;
                overflow: hidden !important;
            }
            .loaded{
                width:60px;
                height:60px;
                position:absolute;
                top:50%;
                left:50%;
                margin-top:-30px; /*高度的一半*/
                margin-left:-30px;/*宽度的一半*/
                background-image: url('assets/images/loading.gif');
                background-repeat:no-repeat;
                background-position: center;
                -moz-background-size: cover;
                background-size: cover;
    
    
            }
        </style>
    </head>
    <body>
    <div class="preloader">
        <div class="loaded"></div>
    </div>
    <div class="box">我是遮罩层下面的内容</div>
    </body>
    <script>
        /**利用js*页面加载完毕,关闭遮罩层***/
        jQuery(document).ready(function ($) {
            $(window).load(function () {
                $(".loaded").fadeOut();
                $(".preloader").delay(1000).fadeOut("slow");
            });
            });
    </script>
    </html>
  • 相关阅读:
    为什么要财务自由
    2019小目标
    《小狗钱钱》后感
    从月光入门到迈出投资第一步
    tslint编译问题-内存溢出
    简单数组
    计算矩阵的乘积
    非数组求杨辉三角
    一维数组求杨辉三角
    二维数组求杨辉三角
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/9267371.html
Copyright © 2020-2023  润新知