网页等待效果 

<style type="text/css">
            .divShade {
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                opacity: 0.4;
                width: 100%;
                height: 100%;
                z-index: 1000;
                background-color: #000;
            }

            .divLoading {
                display: none;
                position: absolute;
                top: 25%;
                left: 43%;
                vertical-align: middle;
                width: 180px;
                height: 40px;
                padding: 8px;
                opacity: 0.8;
                background-color: #edecec;
                z-index: 1002;
                overflow: auto;
                text-align: center;
            }
        </style>
<!--等待效果-->
<body>
            <div id="divShade" class="divShade"></div>
            <div id="divLoading" class="divLoading">
                <table style="width: 100%; height: 100%">
                    <tbody>
                        <tr>
                            <td style="text-align: right">
                                <img src="../images/loading.gif">
                            </td>
                            <td style="text-align: left">
                                <span id="loadingMsg">获取中，请稍候......</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
</body>
(function ($) {
    /*异步等待效果 start*/
    var loading = function(msg) {
        $("#loadingMsg").html(msg);
        $("#divShade").css({ display: "block" });
        $("#divLoading").show();
    };

    var completed = function() {
        $("#divShade").hide();
        $("#divLoading").hide();
    };
    /*异步等待效果 start*/

    window.common = {
        loading: loading,
        completed: completed
    }

})(jQuery);

　　

　　

　　这些代码需要引入jQuery

posted @ 2014-11-03 10:55  夜郎之西1  阅读(395)  评论(0)    收藏  举报