2016-03-08 · 百度知道合伙人官方认证企业
育知同创教育
使用JSP来实现百度的登录弹出框：
核心代码：
<html>
<head>
<title></title>
<script type="text/javascript">
function showLogin() {
var loginDiv = document.getElementById("loginDiv");
var zhezhao = document.getElementById("zhezhao");
var clientx = document.documentElement.clientWidth;
var clienty = document.documentElement.clientHeight;
var l_margin = (clientx - parseInt(loginDiv.style.width)) / 2;
var t_margin = (clienty - parseInt(loginDiv.style.height)-200) / 2
loginDiv.style.left = l_margin + "px";
loginDiv.style.top = t_margin +"px";
loginDiv.style.display = "block";
zhezhao.style.display = "block";
}
function hidLogin() {
var loginDiv = document.getElementById("loginDiv");
var zhezhao = document.getElementById("zhezhao");
loginDiv.style.display = "none";
zhezhao.style.display = "none";
}
function titleMove() {
var moveable = true;
var loginDiv = document.getElementById("loginDiv");
//以下变量提前设置好 var clientX = window.event.clientX;
var clientY = window.event.clientY;
var moveTop = parseInt(loginDiv.style.top);
var moveLeft = parseInt(loginDiv.style.left);
document.onmousemove = function MouseMove() {
if (moveable) {
var y = moveTop + window.event.clientY - clientY;
var x = moveLeft + window.event.clientX - clientX;
if (x > 0 && y > 0) {
loginDiv.style.top = y + "px";
loginDiv.style.left = x + "px";
}
}
}
document.onmouseup = function Mouseup() {
moveable = false;
}
}
</script>
</head>
<body>
<!--Main start z-index:0-->
<div id="Main" style="position:absolute;z-index:0;">
<a href="javascript:showLogin()">登陆</a>
</div>
<!--Main start z-index:0-->
<!--loginDiv start :z-index:2-->
<div id="loginDiv" style="background-color:white;width:300px;height:150px;border:1px solid blue;z-index:2;display:none;position:absolute;border-top:none">
<div onmousedown="titleMove()" id="login_title" style="width:300px;height:25px;background-color:Blue;border:1px solid silver;border-left:none;border-right:none">
<!--<img src="../images/close.jpg" style="float:right" onclick="hidLogin()"/>-->
<a href="javascript:hidLogin()" style="float:right;text-decoration:none;color:white;margin-right:2px;font-size:20px">×</a>
</div>
<table style="clear:right;width:298px;height:115px;text-align:right;margin-top:10px;">
<tr><td>用户名：</td><td><input type="text" style="width:180px;" /></td><td> </td></tr>
<tr><td>密码:</td><td><input type="text" style="width:180px;" /></td><td> </td></tr>
<tr><td><br /></td><td></td></tr>
</table>
</div>
<!--loginDiv end :z-index:2-->
<!--zhezhao start: z-index:1-->
<div id="zhezhao" style="position:absolute;z-index:1;width:100%;height:100%;background-color:silver;display:none;opacity:.5;">
<!--zhezhao end-->
</div>
</body>
</html>
运行效果：
类似代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;}
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asfsdfasdfasdf</title>
<script language="javascript" type="text/javascript">
function show(){
id1.style.height=window.screen.height+"px";
id1.style.width=window.screen.width+"px";
id1.style.display='block';
id2.style.display='block'
}
function hide(){
id1.style.display='none'
id2.style.display='none'
}
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelTop += percent;
if(NS) document.id2.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelLeft += percent;
if(NS) document.id2.left += percent;
lastScrollX = lastScrollX + percent;
}
}
function checkFocus(x,y) {
stalkerx = document.id2.pageX;
stalkery = document.id2.pageY;
stalkerwidth = document.id2.clip.width;
stalkerheight = document.id2.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("id2") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.id2;
stalkerTouchedX = e.pageX-document.id2.pageX;
StalkerTouchedY = e.pageY-document.id2.pageY;
}
}
return true;
}
</script>
</head>
<body>
<p> </p>
<div id="id2">
这里可以放内容，或者添加div用innerhtml进行添加内容就可以了
<br/>
<input name="Button1" type="button" value="button" onclick="hide()"/>
</div>
<div id="id1"> 123</div>
<form method="post">
<input name="Button2" type="button" value="登录" onclick="show()"/></form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>webkey.cn</title>
</head>
<script>
function sAlert(str)
{
var msgw,msgh,bordercolor;
msgw=400; //提示窗口的宽度
msgh=100; //提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#336699"; //提示窗口的边框颜色
titlecolor="#99CCFF"; //提示窗口的标题颜色
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=document.body.offsetHeight;
if (sHeight<screen.height)
{
sHeight=screen.height;
}
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight = (msgh-titleheight) + "px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function()
{
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.style.overflow = "hidden";
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
<body>
<input type="button" value="点击这里" onclick="sAlert('测试效果');" />
</body>
</html>
保存成html点击测试。
这个属于JS特效，在页面中弄个 浮动的DIV然后通过事件触发JS给DIV定位就可以实现这个效果
但里面的数据是连接数据库的，处理起来比较麻烦。这里就不细说了。
