Home  >  Article  >  Web Front-end  >  Simulate the implementation of ajax loading box_html/css_WEB-ITnose

Simulate the implementation of ajax loading box_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:56:16924browse

function loading(p_value,str)
{
if (p_value)
{
if (!document.getElementById("load_area"))
{
var para1 = document.createElement("span");
var node=document.createTextNode(str);
para1.appendChild(node);
var para=document.createElement("div");
para.id="load_area";
var top=document.body.scrollTop document.documentElement.scrollTop;//获取页面中的实际高度
top_position = top 157 "px";
para.style.top =top_position;
icon.style.cssText = ";vertical-align:middle;padding-right:4px;margin-top:-2px;"
para.style.cssText =
";position:absolute;left:50%;width:140px;margin-left:-70px;height:50px;line-height:50px;font-size:18px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;text-align:center;background-color: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;";

var icon = new Image();
icon.src="images/loading1.gif";//这里用实际路径替换
document.body.appendChild(para);

para.appendChild(icon);

para.appendChild(para1);

}
else
{
document.getElementById("load_area").style.display="block";
}
}
else
{
document.getElementById("load_area").style.display="none";
}
}

 

 

调用方法:loading(true,"加载中...");  loading(false)

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn