垂直居中层 js操作css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">//这个一定要加 因为ie8  xhtml4.0不支持fixed  如果第一个层高度超过浏览器高度 也就是有滚动条  imgdiv是不随滚动条滚动而滚动,它一直都在那里
<body id="gn" ></body>
<script language="javascript"> 
function $$(titleName)
 {
    return document.createElement(titleName);
 }
function $(e)
{
    return document.getElementById(e);
}
	var lodingBox = $$("div");
	lodingBox.style.position="fixed";
	lodingBox.style.width=screen.width+"px";
        lodingBox.style.height=screen.height+"px";
        lodingBox.style.backgroundColor="#cccccc";	
        lodingBox.id="lodingBox";

	var imgdiv=$$("div");	
	var imgdiv_width="300";
	var imgdiv_height="100";
	var imfdiv_left=screen.width-screen.width/2-imgdiv_width/2;
	//为什么要减去100px
	//我也不知道为什么 因为这样算出来上边高底下低所以我就再减去100px
	var imfdiv_height=screen.height-screen.height/2-imgdiv_height/2-100;
	imgdiv.style.position="fixed";
	imgdiv.style.left=imfdiv_left+"px";
	imgdiv.style.top=imfdiv_height+"px";	
	imgdiv.style.width=imgdiv_width+"px";
	imgdiv.style.height=imgdiv_height+"px";
        imgdiv.style.backgroundColor="red";
        imgdiv.id="imgdiv";
	
        var lodingImg=$$("img");
        lodingImg.src="loadingmin.gif";
        var lodingText=$$("span");
        lodingText.innerHTML="正在存入数据,请稍候....";        
        imgdiv.appendChild(lodingImg);
        imgdiv.appendChild(lodingText);
        $("gn").appendChild(lodingBox);       
	$("gn").appendChild(imgdiv); 
	var temp=1; 
        zheli(10);
       // $("lodingBox").style.display="none";
 	//$("imgdiv").style.display="none";
	
	function zheli(n){
		if(n==1)
		{
			return temp;
		}	
		temp=temp*n;
		//document.write(temp+"<br />");//递归
		zheli(n-1);
	}
</script>

原文地址:https://www.cnblogs.com/0banana0/p/2058129.html