⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 closewindows.html

📁 利用AJAX技术实现windows关机效果
💻 HTML
字号:
<html>
<head>
<title>仿Windows关机效果</title>
<style type="text/css">
#content
{/*该层为高亮显示层*/
       BORDER-RIGHT: #fff 1px solid;
       BORDER-TOP: #fff 1px solid;
       DISPLAY: block; 
       Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
       BACKGROUND: #fdfce9; /*设置背景色*/
       LEFT: 50%; 
       MARGIN: -220px 0px 0px -250px; 
       BORDER-LEFT: #fff 1px solid; 
       WIDTH: 400px; 
       BORDER-BOTTOM: #fff 1px solid; 
       POSITION: absolute; 
       TOP: 60%; 
       HEIGHT: 300px; 
       TEXT-ALIGN: left
}
#overlay
{/*该层为覆盖层*/
	DISPLAY: none;
	Z-INDEX: 9999; FILTER: alpha(opacity=80); 
	LEFT: 0px; 
	WIDTH: 100%; 
	POSITION: absolute; 
	TOP: 0px; 
	HEIGHT: 100%; 
	BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
</style>
<script type="text/javascript">
        var xmlHttp;

        function createXMLHttpRequest()
		{
            if (window.ActiveXObject)
			{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest)
			{
                xmlHttp = new XMLHttpRequest();                
            }
        }

        function ShowReg(otype)
		{
            //alert(otype);
			Show();
			var obj=document.getElementById("content");
			obj.innerHTML="<h3><font color='red'>Loading...</font></h3>";
			createXMLHttpRequest();
            var url = "register.jsp?type="+otype;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = ShowRegCallback;
            xmlHttp.send(null);
        }

        function ShowRegCallback()
		{
            if (xmlHttp.readyState == 4) 
			{
                if (xmlHttp.status == 200) 
				{
                    var result=xmlHttp.responseText;
					var obj=document.getElementById("content");
					obj.innerHTML=result;
                }
            }
        }
function Hidde()
{
  document.getElementById("overlay").style.display="none";
  document.getElementById("content").style.display="none";
}
function Show()
{
 document.getElementById("overlay").style.display="block";
 document.getElementById("content").style.display="block";
}
</script>
</head>
<body>
<a href="#" id="register" onClick="javascript:ShowReg(this.id)" style="float:left; size:30px">我要注册</a>
<a href="#" id="pics" onClick="javascript:ShowReg(this.id)" style="position:absolute; top:160px;">查看图片</a>
<!--该层为覆盖层 -->
<div id="overlay" style="display:none;"></div>
<!--该层为高亮显示层 -->
<div id="content" style="display:none;"><a href="#" onClick="javascript:Hidde()">关闭</a></div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -