html 遮罩加载动画效果,页面载入动画片(loading)

页面载入动画(loading)

通常我们在加载iframe,或者ajax请求的时候需一个遮罩动画，我们可以这样处理，使用一个绝对定位的div，高度宽度100%,然后append的body中

具体代码可以参考如下

/**

* Author:Zhang Qi

* Create:2013-03-28

* Function:在body中打开遮罩以及关闭

* */

var LoadingUtils = {

Open:function(){

var top= $(this).offset()==undefined?0:$(this).offset().top;

var left= $(this).offset()==undefined?0:$(this).offset().left;

var appender=null;

if($(this).parent().length==0)

{

appender="body";

}else

{

appender=$(this);

}

$("

display : "block",

width : $(this).outerWidth(),//100%

height : $(this).outerHeight(),//height

top:top,

left:left

}).appendTo(appender);//body

$("

.appendTo(appender).css({

display : "block",

left : ($(this).outerWidth()-153) / 2+left,

top : ($(this).outerHeight()-42) / 2+top,

});

},

Close:function(){

$(".mask").remove();

$(".mask-msg").remove();

}

}

样式表

.mask {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

opacity: 0.3;

filter: alpha(opacity=30);

display: none;

background: #eee;

}

.mask-msg {

position: absolute;

padding: 12px 5px 10px 30px;

width: auto;

height: 16px;

border-width: 2px;

border-style: solid;

display: none;

border-color: #ddd;

font-size:12px;

background: #fff url('loading.gif') no-repeat scroll 5px center;

}

如何调用

1.在DIV ww上显示遮罩

LoadingUtils.Open.call(document.getElementById("ww"));

2.遮罩住整个页面

$(document).ready(function() {

LoadingUtils.Open.call(this);

});

扩展=========>IFrame中

window.parent().LoadingUtils.Close();

从子窗中关闭父页的loading动画