漂亮的点击弹出的登陆框 -

umgsai

浏览: 103436 次
性别:
来自: 广州

最近访客更多访客>>

yexiaoshunfeier

abc123

liuqu11

CharlesLibby

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (211)

社区版块

存档分类

漂亮的点击弹出的登陆框


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="www.w3.org/1999/xhtml">
<head>
<title>漂亮的点击弹出的登陆框</title>
<metahttp-equiv="content-Type"content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<styletype="text/css">
.login{z-index:+1;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;}
.login.inputb{width:97px;height:15px;border:1pxsolid#baced6;font-size:12px;padding-top:2px;margin-right:6px;display:block;float:left;}
.login_header{
cursor:move
}
.logindiv.login_header
{
border:black;
border-bottom:0px;
cursor:default;
width:254px;
height:31px;
line-height:19px;
vertical-align:middle;
background:url('images/headbg.gif')no-repeat;
text-decoration:none;
}
.logindiv.login_body
{
border:black;
width:254px;
background:url('images/bg.gif')no-repeatleftbottom;
margin:0;
}
.loginimg.login_exit
{
float:right;
margin:6px8px0px0px;
cursor:pointer;
}
.logintable
{
border-collapse:collapse;
margin-bottom:5px;
}
.logintableth,.logintabletd{padding:3px0;}
.logintableth{width:68px;text-align:right;font-weight:normal;color:#4e6aab;}
.login.code{}
.login.codeimg{border:1pxsolid#adc6dd;margin-bottom:-5px;}
.login.lsubmit{padding-left:60px;}
.logintabletd.linka{display:block;float:left;padding-top:4px;}
</style>
<scriptlanguage="javascript">
varpopup_dragging=false;
varpopup_target;
varpopup_mouseX;
varpopup_mouseY;
varpopup_mouseposX;
varpopup_mouseposY;
varpopup_oldfunction;
functionpopup_display(x)
{
varwin=window.open();
for(variinx)win.document.write(i+'='+x[i]+'<br>');
}
//-----popup_mousedown-------------------------------------------------------
functionpopup_mousedown(e)
{
varie=navigator.appName=="MicrosoftInternetExplorer";
if(ie&&window.event.button!=1)return;
if(!ie&&e.button!=0)return;
popup_dragging=true;
popup_target=this['target'];
popup_mouseX=ie?window.event.clientX:e.clientX;
popup_mouseY=ie?window.event.clientY:e.clientY;
if(ie)
popup_oldfunction=document.onselectstart;
elsepopup_oldfunction=document.onmousedown;
if(ie)
document.onselectstart=newFunction("returnfalse;");
elsedocument.onmousedown=newFunction("returnfalse;");
}
//-----popup_mousemove-------------------------------------------------------
functionpopup_mousemove(e)
{
if(!popup_dragging)return;
varie=navigator.appName=="MicrosoftInternetExplorer";
varelement=document.getElementById(popup_target);
varmouseX=ie?window.event.clientX:e.clientX;
varmouseY=ie?window.event.clientY:e.clientY;
element.style.left=(element.offsetLeft+mouseX-popup_mouseX)+'px';
element.style.top=(element.offsetTop+mouseY-popup_mouseY)+'px';
popup_mouseX=ie?window.event.clientX:e.clientX;
popup_mouseY=ie?window.event.clientY:e.clientY;
}
//-----popup_mouseup---------------------------------------------------------
functionpopup_mouseup(e)
{
if(!popup_dragging)return;
popup_dragging=false;
varie=navigator.appName=="MicrosoftInternetExplorer";
varelement=document.getElementById(popup_target);
if(ie)
document.onselectstart=popup_oldfunction;
elsedocument.onmousedown=popup_oldfunction;
}
//-----popup_exit------------------------------------------------------------
functionpopup_exit(e)
{
varie=navigator.appName=="MicrosoftInternetExplorer";
varelement=document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility='hidden';
element.style.display='none';
}
//-----popup_show------------------------------------------------------------
functionpopup_show()
{
element=document.getElementById('popup');
drag_element=document.getElementById('popup_drag');
exit_element=document.getElementById('popup_exit');
element.style.position="absolute";
element.style.visibility="visible";
element.style.display="block";
element.style.left=(document.documentElement.scrollLeft+popup_mouseposX-10)+'px';
element.style.top=(document.documentElement.scrollTop+popup_mouseposY-10)+'px';
drag_element['target']='popup';
drag_element.onmousedown=popup_mousedown;
exit_element.onclick=popup_exit;
}
//-----popup_mousepos--------------------------------------------------------
functionpopup_mousepos(e)
{
varie=navigator.appName=="MicrosoftInternetExplorer";
popup_mouseposX=ie?window.event.clientX:e.clientX;
popup_mouseposY=ie?window.event.clientY:e.clientY;
}
//-----AttachEvents---------------------------------------------------------
if(navigator.appName=="MicrosoftInternetExplorer")
document.attachEvent('onmousedown',popup_mousepos);
elsedocument.addEventListener('mousedown',popup_mousepos,false);
if(navigator.appName=="MicrosoftInternetExplorer")
document.attachEvent('onmousemove',popup_mousemove);
elsedocument.addEventListener('mousemove',popup_mousemove,false);
if(navigator.appName=="MicrosoftInternetExplorer")
document.attachEvent('onmouseup',popup_mouseup);
elsedocument.addEventListener('mouseup',popup_mouseup,false);
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<ahref="#"onclick="popup_show()">登陆</a>
<divclass="login"id="popup"style="visibility:hidden;display:none;">
<divclass="login_header"id="popup_drag">
<imgclass="login_exit"id="popup_exit"src="images/close.gif"alt="关闭"/>
</div>
<divclass="login_body">
<formid="member_login"name="member_login"action=""method="post">
<table>
<tr>
<th>用户名：</th>
<td><inputtype="text"class="inputb"/><spanclass="linka"><ahref="#">快速注册</a></span></td>
</tr>
<tr>
<th>密码：</th>
<td><inputtype="text"class="inputb"/><spanclass="linka"><ahref="#">忘记密码</a></span></td>
</tr>
<tr>
<th>验证码：</th>
<td><inputtype="text"class="inputb"/><spanclass="code"><imgsrc="images/code.gif"/></span></td>
</tr>
<tr>
<th>Cookie：</th>
<td><selectname="select"id="select">
<optionvalue="1">保持一年</option>
</select></td>
</tr>
<tr>
<tdcolspan="2"class="lsubmit"><inputtype="submit"value="登录"/><inputtype="submit"value="重置"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>