一个不错的CSS+JS实现的遮罩层(动态加载中显示效果)代码

作者:青山常在人不老   阅读 (1357)  |  收藏 (0)  |  点赞 (0)

摘要

本文提供了一个很不错的通过javascript 和css实现的遮罩层代码实现加载中的代码,可结合ajax异步实现防止多次重复提交。


原文链接:一个不错的CSS+JS实现的遮罩层(动态加载中显示效果)代码

本文实现如下功能:

    1、模态框遮罩 + loading中(加载中)效果
    2、默认隐藏模态框
    3、页面开始发送Ajax请求数据时,显示模态框
    4、请求完成,隐藏模态框

本文首先实现一个基本的遮罩层(不含ajax异步效果),然后会在基本的遮罩层的基础上实现ajax异步遮罩(动态加载),效果如下:

image.png

一、一个基于CSS+js实现一个基本的遮罩层效果

实现一个动态加载中效果的代码并不需要任何图片、gif,只通过CSS样式和javascript代码实现动态加载中的遮罩层(无ajax,但是可以通过js来控制显示)

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script>
    <style>
        .sk-circle {
            margin: 40px auto;
            width: 40px;
            height: 40px;
            position: relative; }
        .sk-circle .sk-child {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0; }
        .sk-circle .sk-child:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
        .sk-circle .sk-circle2 {
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            transform: rotate(30deg); }
        .sk-circle .sk-circle3 {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg); }
        .sk-circle .sk-circle4 {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
        .sk-circle .sk-circle5 {
            -webkit-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            transform: rotate(120deg); }
        .sk-circle .sk-circle6 {
            -webkit-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            transform: rotate(150deg); }
        .sk-circle .sk-circle7 {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
        .sk-circle .sk-circle8 {
            -webkit-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            transform: rotate(210deg); }
        .sk-circle .sk-circle9 {
            -webkit-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            transform: rotate(240deg); }
        .sk-circle .sk-circle10 {
            -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg); }
        .sk-circle .sk-circle11 {
            -webkit-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            transform: rotate(300deg); }
        .sk-circle .sk-circle12 {
            -webkit-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            transform: rotate(330deg); }
        .sk-circle .sk-circle2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
        .sk-circle .sk-circle3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s; }
        .sk-circle .sk-circle4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
        .sk-circle .sk-circle5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
        .sk-circle .sk-circle6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; }
        .sk-circle .sk-circle7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
        .sk-circle .sk-circle8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; }
        .sk-circle .sk-circle9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
        .sk-circle .sk-circle10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s; }
        .sk-circle .sk-circle11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
        .sk-circle .sk-circle12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s; }

        @-webkit-keyframes sk-circleBounceDelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0); }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1); } }

        @keyframes sk-circleBounceDelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0); }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1); } }


        .meng_div {
            width:100%;
            height:100%;
            background-color:#000;
            position:absolute;
            top:0;
            left:0;
            z-index:2;
            opacity:0.3;
            /*兼容IE8及以下版本浏览器*/
 filter: alpha(opacity=30);
            display:none;
        }

        .log_window {
            width:200px;
            height:200px;

            margin: auto;
            position: absolute;
            z-index:3;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display:none;
        }
    </style>
    <script type="text/javascript">
        function shield(){
            $('#meng_div').show();
            $('.log_window').show();
        }
    </script>

</head>
<body>
<a href="javascript:shield()">打开遮罩</a>
<div id="meng_div"></div>
<div class="sk-circle log_window">
    <div class="sk-circle1 sk-child"></div>
    <div class="sk-circle2 sk-child"></div>
    <div class="sk-circle3 sk-child"></div>
    <div class="sk-circle4 sk-child"></div>
    <div class="sk-circle5 sk-child"></div>
    <div class="sk-circle6 sk-child"></div>
    <div class="sk-circle7 sk-child"></div>
    <div class="sk-circle8 sk-child"></div>
    <div class="sk-circle9 sk-child"></div>
    <div class="sk-circle10 sk-child"></div>
    <div class="sk-circle11 sk-child"></div>
    <div class="sk-circle12 sk-child"></div>
</div>
</body>
</html>

显示效果如下:

通过上面的代码就可以吊起遮罩,显示动态加载中的样式,注意,上面的动态加载是会自动转圈的哦。

二、ajax异步调用时动态加载中效果

本例中的异步加载和上面中的唯一的改进在于,当ajax在请求前会先调起加载中的动态效果,而在接收到返回数据后,则关闭蒙版中,即可。示例代码如下:

var ajaxServer = function(url, action) {
	var result = {};
	$.ajax({
		type : "POST",
		url : url,
		data : action,
		dataType : "json",
		beforeSend: function() {
			$('#meng_div').show();
	                $('.log_window').show();
	    },
		async : false,
		success : function(data) {
			result = data;
			$('#meng_div').hide();
	                $('.log_window').hide();
		},
		error : function() {
			console.log("网络连接出错!");
			$('#meng_div').hide();
	                $('.log_window').hide();
		}
	});
	return result;
};

重点在于(隐藏蒙版-加载中效果隐藏)

$('#meng_div').hide();
$('.log_window').hide();

和(显示蒙版-加载中效果显现)

$('#meng_div').show();
$('.log_window').show();


分类   默认分组
字数   6823

博客标签    ajax异步控制加载中效果   js实现加载中效果   css实现加载中蒙版效果  

评论