Email或用户名互相切换的登陆框_网页代码站(www.webdm.cn)

您的当前位置：网页代码站 >> 表单及按钮 >> Email或用户名互相切换的登陆框

Email或用户名互相切换的登陆框

分类：表单及按钮时间：2010-08-17 点击：

关键词：JS|css|网页代码|代码|

<!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>
		<title>Email或用户名互相切换的登陆框 - www.webdm.cn</title>
 <style type="text/css">
* {
        margin:0;
        padding:0;
        font-size:12px;
        font-weight:normal;
        font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
        font-style:normal;
        list-style-type:none;
        text-decoration:none;
}
div#body input#fnbtn {
        width:78px;
        height:39px;
        border:none;
        cursor:pointer;
        position:absolute;
        top:40px;
        left:100px;
        background:transparent url('


http://www.webdm.cn/images/20100817/12447121190.png') 0 -70px no-repeat;
}
div#mask {
        position:absolute;
        top:0;
        left:0;
        background:#fff;
        filter:alpha(opacity=60);
        -moz-opacity:0.2;
        z-index:100;
}
div#login {
        position:absolute;
        top:75px;
        left:100px;
        width:293px;
        z-index:200;
}
div#login h2 {
        height:26px;
        padding-top:3px;
        padding-left:25px;
        background:transparent url('


http://www.webdm.cn/images/20100817/12447121190.png') -84px -70px no-repeat;
}
div#login h2 input {
        height:18px;
        width:18px;
        float:right;
        border:none;
        cursor:pointer;
        margin:2px 6px 0 0;
        background:transparent url('


http://www.webdm.cn/images/20100817/12447121190.png') 0 -169px no-repeat;
}
div#login h2 a {
        display:block;
        float:left;
        width:83px;
        height:26px;
        line-height:26px;
        text-align:center;
        text-decoration:none;
        color:#666;
}
div#login h2 a.cur {
        color:#f00;
        background:transparent url('


http://www.webdm.cn/images/20100817/12447121190.png') 0 -187px no-repeat;
}
div#login ul {
        padding:14px 0 18px 12px;
        background:transparent url('


http://www.webdm.cn/images/20100817/12447121190.png') -84px bottom no-repeat;
}
div#login ul li {
        padding-left:60px;
        margin-top:10px;
        display:inline-block;
}
div#login ul li {
        display:block;
}
div#login ul li:after {
        content:"youdian";
        clear:both;
        display:block;
        height:0;
        visibility:hidden;
}
div#login ul li tt {
        float:left;
        width:60px;
        margin-left:-70px;
        text-align:right;
        line-height:22px;
        color:#444;
}
div#login ul li div input.cell, div#login ul li div input.cell2 {
        height:16px;
        padding:2px;
        line-height:16px;
        width:179px;
        border:1px #dcdcdc solid;
        color:#666;
}
div#login ul li div input.cell2 {
        width:50px;
} 
div#login ul li div label {
        color:#666;
        cursor:pointer;
}
div#login ul li div img {
        margin-bottom:-7px;
        margin-left:8px;
}
* html div#login ul li div img {
        margin-bottom:-4px;
}
*+html div#login ul li div img {
        margin-bottom:-4px;
}
div#login ul li div input#fnlogin {
        width:59px;
        height:21px;
        cursor:pointer;
        border:none;
        margin-right:15px;
        background:transparent url('


http://www.webdm.cn/images/20100817/12447121190.png') 0 -148px no-repeat;
}
div#login ul li p {
        padding-top:4px;
        color:#f00;
}
</style>

	</head>
<body>
<div id="body">
<input id="fnbtn" type="button" title="" />
</div><div id="mask" style="display:none;"></div>
<div id="login" style="display:none;">
<h2><input id="fnquit" type="button" title="退出登录" /><a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a></h2>
<ul><form id="LoginForm" name="LoginForm" action="/"  method="post" enctype="multipart/form-data" ><li><input id="loginType" name="loginType" type="hidden"/><tt><label id="logtype" for="email">Email:</label></tt><div><input id="username" name="username" type="text" class="cell" onKeyPress="return checkSubmit(event)"/></div></li>
<li><tt><label for="password">密　码:</label></tt><div><input id="password" name="password" type="password" class="cell" onKeyPress="return checkSubmit(event)" /></div></li><li><tt></tt>
<div><input id="reme" name="rememberme" type="checkbox" />　<label for="reme">下次自动登录</label></div></li>
<li><tt></tt> <div><input id="fnlogin" type="button"/><a href="/" target="_blank" onclick="return checkForgetPassword()">忘记密码?</a></div></li>
</form></ul>
</div>
<script type="text/javascript">
function g(obj) {
        return document.getElementById(obj);
}
var login = {
        title:null,
        show:function(){
                var sWidth,sHeight;
                sWidth = screen.width;
                sWidth = document.body.offsetWidth;
                sHeight=document.body.offsetHeight;
                if (sHeight<screen.height){sHeight=screen.height;}
                g("mask").style.width = sWidth + "px";
                g("mask").style.height = sHeight + "px";
                g("mask").style.display = "block";
                g("login").style.display = "block";
                g("login").style.right = g("body").offsetLeft + "px";
                
//                window.status = g("body").offsetLeft;
        },
        hide:function(){
                g("mask").style.display = "none";
                g("login").style.display = "none";
        }
}
g("fnbtn").onclick = function(){
        login.show();
        this.blur();
        this.style.backgroundPosition = "0 -109px";
};
g("fnlogin").onclick = function() {
    // The following 5 lines of code is used to get the login type & pass to the form
    // One More line of code is insert to root_index.jsp to capture the hidden value
    if (document.getElementById("logtype").innerHTML == "Email:") {
        document.getElementById('loginType').value = 'email';
    } else {
        document.getElementById('loginType').value = 'mobile';   
    }
    document.LoginForm.submit();
};
g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";};
var aa = g("login").getElementsByTagName("a");
var aTab = new Array();
for(var i=0; i<aa.length; i++){
        if(aa[i].parentNode.nodeName == "H2"){
                aTab.push(aa[i]);
        }
}
for(var j=0; j<aTab.length; j++){
        aTab[j].onclick = function(){
                this.blur();
                if (this.className != "cur"){
                        for(var k=0; k<aTab.length; k++){aTab[k].className = ""};
                        this.className = "cur"
                        g("logtype").innerHTML = this.name + ":";
        }
        }
}
</script>
<script language="javascript">
login.hide();
</script>

<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
</body>
</html>

运行代码全选代码复制代码保存代码友情提示

Email或用户名互相切换的登陆框

一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。
运行代码方式：
1、点击“复制”按钮；
2、在桌面建立一个txt文档；
3、粘贴复制的代码；
4、最后把txt的扩展名改为“htm”或“html”；
5、完成，打开即可看到效果。

二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！

三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！

四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！

来顶一下

上一篇：自写Js+CSS轮显效果
下一篇：CSS美化的滚动条代码