【前端编程-学习-5】系统加载提示

概述


在系统加载数据时,可能耗时比较长,此时有一个系统加载的动态图,效果体验比较好,如下图所示:

这是系统加载动态图;

jsp界面


  1. <!--系统加载提示-->
  2. <div id="loadBackGround" class="loadBackGround"></div>
  3. <div id="loadGif" class="loadGif">
  4. <img src="images/loading.gif">
  5. </div>

动态图保存的路径

CCS样式



  1. /* 系统加载提示 */
  2. div.loadBackGround{ 100%; height:100%; background-color:white; position:absolute; top:0;left:0;z-index:999999999999999;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
  3. div.loadGif{position:absolute;top:50%;left:50%; margin-left:-80px; margin-top:-50px;z-index:999999999999999999;}
  4. div.loadGif h2{ font-size:14pt; padding-bottom:0px; margin-bottom:0-10px;color:black}


加载完毕后


  1. //系统加载中提示
  2. $("#loadBackGround").hide();
  3. $("#loadGif").hide();






附件列表

原文地址:https://www.cnblogs.com/ssslinppp/p/4580594.html