jquery实现页面加载效果

 

 *

 {

  margin: 0;

  padding: 0;

  list-style-type: none;

 }

 a, img

 {

  border: 0;

 }

 .loading

 {

  margin: 100px auto 0 auto;

  width: 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;

  width: 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

 {

  width: 180px;

  height: 50px;

  line-height: 50px;

  border: 2px solid #D6E7F2;

  background: #fff;

 }

 #ajaxLoad img

 {

  margin: 10px 15px;

  float: left;

  display: inline;

 }

 $(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' });

 }

 点击加载特效

  加载中，请稍候...