zoukankan      html  css  js  c++  java
  • Jquery页面加载效果

     

     

    1、说明

      Jquery页面加载可实现异步请求时提示“请稍后,正在加载...”效果,同步请求不可用(即ajax async: false)。本文地址:http://www.cnblogs.com/lengzhan/p/6423312.html

    2、代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery页面加载特效</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            a, img
            {
                border: 0;
            }
            .loading
            {
                margin: 100px auto 0 auto;
                 400px;
                text-align: center;
                font-size: 18px;
            }
            .loading .action
            {
                text-decoration: none;
                font-family: "微软雅黑" "宋体";
            }
             
            .cover
            {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 998;
                 100%;
                height: 100%;
                _padding: 0 20px 0 0;
                background: #f6f4f5;
                display: none;
            }
            .showLoad
            {
                position: fixed;
                top: 0;
                left: 50%;
                z-index: 9999;
                opacity: 0;
                filter: alpha(opacity=0);
                margin-left: -80px;
            }
            *html, *html body
            {
                background-image: url(about:blank);
                background-attachment: fixed;
            }
            *html .showLoad, *html .cover
            {
                position: absolute;
                top: expression(eval(document.documentElement.scrollTop));
            }
            #ajaxLoad
            {
                border: 1px solid #8CBEDA;
                font-size: 12px;
                font-weight: bold;
            }
            #ajaxLoad div.loadAll
            {
                 180px;
                height: 50px;
                line-height: 50px;
                border: 2px solid #D6E7F2;
                background: #fff;
            }
            #ajaxLoad img
            {
                margin: 10px 15px;
                float: left;
                display: inline;
            }
        </style>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var hei = $(document).height();
                $(".cover").css({ "height": hei });
                $(".action").click(function () {
                    startWaiting();
                    setTimeout(function () {
                        endWaiting();
                    }, 3000);
                });
            });
     
            //开始加载
            function startWaiting() {
                $(".cover").css({ 'display''block''opacity''0.8' });
                $(".showLoad").stop(true).animate({ 'margin-top''300px''opacity''1' }, 200);
            }
     
            //结束加载
            function endWaiting() {
                $(".showLoad").stop(true).animate({ 'margin-top''250px''opacity''0' }, 400);
                $(".cover").css({ 'display''none''opacity''0' });
            }
     
        </script>
    </head>
    <body>
        <div class="loading">
            <a class="action" href="javascript:void(0);">点击加载特效</a></div>
        <div class="cover">
        </div>
        <div id="ajaxLoad" class="showLoad">
            <div class="loadAll">
                <img src="image/waiting.gif">加载中,请稍候...</div>
        </div>
    </body>
    </html>

    3、DEMO

      点击下载

     转 
  • 相关阅读:
    MVC ORM 架构
    Kubernetes 第八章 Pod 控制器
    Kubernetes 第七章 Configure Liveness and Readiness Probes
    Kubernetes 第六章 pod 资源对象
    Kubernetes 第五章 YAML
    Kubernetes 核心组件
    Kubernetes 架构原理
    Kubernetes 第四章 kubectl
    Kubernetes 第三章 kubeadm
    yum 配置及yum 源配置
  • 原文地址:https://www.cnblogs.com/wenJiaQi/p/6426295.html
Copyright © 2011-2022 走看看