ajax异步加载遮罩层特效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax异步加载遮罩层特效相关的知识，希望对你有一定的参考价值。
<!doctype html> <html> <head> <title>遮罩层（正在加载中）</title> <meta charset="utf-8" /> <style> #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.44); } #coverShow{ display:none; position:fixed; z-index:2; top:50%; left:50%; border:1px solid #127386; width:300px; height:100px; margin-left:-150px; margin-top:-150px; background:#127386; } </style> <script> function coverit() { var cover = document.getElementById("cover"); var covershow = document.getElementById("coverShow"); cover.style.display = ‘block‘; covershow.style.display = ‘block‘; } function hidden_coverit() { var cover = document.getElementById("cover"); var covershow = document.getElementById("coverShow"); cover.style.display = ‘none‘; covershow.style.display = ‘none‘; } </script> </head> <body> <div id="cover"></div> <div id="coverShow"> <table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; height: 100px; min-height: 100px;" bgcolor="#127386"> <tr> <td height="30" style="font-size: 12px;">数据加载中，请稍后......</td> </tr> <tr> <td align="center" bgcolor="#ffffff"> <img src="./20141023034634293.gif" alt="" /> </td> </tr> </table> </div> <input type="button" value="遮住" onclick="coverit()"/> </body> <script type="text/javascript"> coverit();//开始加载遮罩层（正在加载中...） $.ajax( { url:‘/StatisticsGame/OverallSituationDo‘, data:{ new_start_time:new_start_time,//开始时间 new_end_time:new_end_time,//结束时间 req_game:$("#select_game1").select().val(), get_select_platform:$(‘#select_platform‘).val(), req_mode:search_mode}, type:‘post‘, cache:false, async:true, dataType:‘json‘, success:function(data) { $(".asset_table_tr").remove(); $(‘.add_tpl_view‘).remove(); if(data["req"] == "success"){ hidden_coverit();//得到数据之后，关闭遮罩加载中... var total_new_count = 0; var total_new_incom_moneys=0; var total_new_draw_moneys=0; var total_get_incom_total_moneys=0; var total_get_draw_total_moneys=0; var total_total_assets_moneys=0; var total_login_count=0; for(i = 0; i < data["data"].length; ++i){ var date = data["data"][i]["new_time"];//日期 var get_select_platform = data["data"][i]["select_platform_name"];//平台名称 var login_count =Number(data["data"][i]["count"]);//登录用户数 var new_count =Number(data["data"][i]["new_count"]);//新用户数 var new_incom_moneys =Number(data["data"][i]["new_incom_money"]);//转入资金用户 var new_draw_moneys =Number(data["data"][i]["new_draw_money"]);//转出资金用户 var get_incom_total_moneys =Number(data["data"][i]["total_incom_money"]);//转入资金总额 var get_draw_total_moneys =Number(data["data"][i]["total_draw_money"]);//转出资金总额 var total_assets_moneys =Number(data["data"][i]["total_cash_momey"]);//KGAME余额 var text = ‘<tr class="asset_table_tr"><td>‘+date + ‘</td>‘; total_new_count += new_count; total_new_incom_moneys += new_incom_moneys; total_new_draw_moneys += new_draw_moneys; total_get_incom_total_moneys += get_incom_total_moneys; total_get_draw_total_moneys += get_draw_total_moneys; total_total_assets_moneys += total_assets_moneys; total_login_count+=login_count; text += ‘<td>‘+ get_select_platform + ‘</td>‘; text += ‘<td>‘+ new_count +‘</td>‘; text += ‘<td>‘+ login_count + ‘</td>‘; text += ‘<td>‘+ new_incom_moneys + ‘</td>‘; text += ‘<td>‘+ new_draw_moneys + ‘</td>‘; text += ‘<td>‘+ get_incom_total_moneys.toFixed(2) + ‘</td>‘; text += ‘<td>‘+ get_draw_total_moneys.toFixed(2) + ‘</td>‘; text += ‘<td>‘+ total_assets_moneys.toFixed(2) + ‘</td>‘; text += ‘</tr>‘; $("#asset_table").append(text); } var text1; var str=‘合计‘; var str2=‘＼‘; text1 += ‘<tr class="add_tpl_view">‘; text1 += ‘<td>‘+ str + ‘</td>‘; text1 += ‘<td>‘+ str2 + ‘</td>‘; text1 += ‘<td>‘+ total_new_count + ‘</td>‘; text1 += ‘<td>‘+ total_login_count + ‘</td>‘; text1 += ‘<td>‘+ total_new_incom_moneys + ‘</td>‘; text1 += ‘<td>‘+ total_new_draw_moneys + ‘</td>‘; text1 += ‘<td>‘+ total_get_incom_total_moneys.toFixed(2) + ‘</td>‘; text1 += ‘<td>‘+ total_get_draw_total_moneys.toFixed(2) + ‘</td>‘; text1 += ‘<td>‘+ total_total_assets_moneys.toFixed(2) + ‘</td>‘; text1 += ‘</tr>‘; $("#asset_table").append(text1); }else{ var error_message=data[‘error_message‘]; alert(error_message); return false; } }, error : function() { } }); </script> </html>
以上是关于ajax异步加载遮罩层特效的主要内容，如果未能解决你的问题，请参考以下文章
jquery+ajax,与后台交互的过程中,弹出遮罩层，并且加载动画。怎么实现？