增加了方向键选择代码<!-----------------模拟登陆弹出框js程序---------------> <script type="text/javascript"> function circle() { var liAry = new Array(); var lis = document.getElementById("mailul").getElementsByTagName("li"); var len = lis.length; for(var o=0;o<len;o++) {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[899,1,46] published at 2010-03-15 15:06:44 from #187 by 4372-->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="http://simg.sinajs.cn/miniblog/css/common/common.css?version=1.1.2.69" type="text/css" rel="stylesheet" />
<link href="http://simg.sinajs.cn/miniblog/css/newlogin/login.css?version=1.1.2.69" type="text/css" rel="stylesheet" />
<style type="text/css">
a.rank1{color:#fff; font-size:12px;}
a.rank2{color:#fff; font-size:12px; font-weight:bold}
a.rank3{color:#fff; font-size:14px;}
a.rank4{color:#fff; font-size:14px; font-weight:bold}
a.rank5{color:#fff; font-size:16px;}
a.rank6{color:#fff; font-size:20px; font-family:"黑体"}
.li{width:100%;height:20px;line-height:20px;overflow:hidden}
</style>
</head>
<!-----------------模拟登陆弹出框js程序--------------->
<script type="text/javascript">
function selectmail()
{
var addressAry = new Array("@sina.com","@vip.sina.com","@163.com","@sohu.com","@gmail.com","@hotmail.com","@126.com","@qq.com");
document.getElementById("mailul").style.display = 'block';
var username = document.getElementById("loginname").value;
if(username.indexOf('@') !== false)
{
var usr = username.substr(username.indexOf('@'));
//alert('('+addressAry[key]+'|'+usr+')');
for(var key in addressAry)
{
//alert(addressAry[key]);
//alert(username.substr(username.indexOf('@')));
var add = addressAry[key];
if( usr.substring(0,usr.length-1) == add)
{
var flag = eval(key)+2;
break;
}
}
}
var lis = document.getElementById("mailul").getElementsByTagName("li");
lis[1].style.background = "#EEEEFF";
for(var i=1;i<lis.length;i++)
{
var p = i;
(function()
{
if(flag)
{
lis[p].style.display = "none";
lis[flag].style.display = "block";
lis[1].style.display = "block";
}else if(username.split('@').length>2)
{
lis[p].style.display = "none";
lis[1].style.display = "block";
//preliText = '';
}else
{
lis[p].style.display = "block";
}
preliText = lis[p].innerHTML;
lis[p].style.cursor = "pointer";
var address = preliText.substr(preliText.lastIndexOf('@'));
if(username.lastIndexOf('@') == -1)
{
lis[p].innerHTML = username+address;
}else
{
lis[p].innerHTML = username.substring(0,username.lastIndexOf('@'))+address;
}
if(p == 1) lis[p].innerHTML = username;
lis[p].onclick = selectloginname;
lis[p].onmouseover = mouseover;
lis[p].onmouseout = mouseout;
})()
}
}
function mouseover()
{
var lis = document.getElementById("mailul").getElementsByTagName("li");
for(var i=1;i<lis.length;i++)
{
lis[i].style.background = '';
}
this.style.background = "#EEEEFF";
}
function mouseout()
{
var lis = document.getElementById("mailul").getElementsByTagName("li");
for(var i=1;i<lis.length;i++)
{
lis[i].style.background = '';
}
lis[1].style.background = '#EEEEFF';
}
function selectloginname()
{
document.getElementById("loginname").value = this.innerHTML;
document.getElementById("mailul").style.display = 'none';
}
</script>
<!-----------------模拟登陆弹出框js程序--------------->
<body>
<div class="bigBg">
<div class="cbg"> <!--内容开始-->
<div class="loginTop"><div style="position:relative; left: 340px; top: 120px;">
<a style="display:block; "><img src="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" width="220" height="35" alt="" /></a>
</div> <img src="http://i3.sinaimg.cn/blog/miniblog/yunying/newunlogin/regbtn.gif" border="0" usemap="#Map" class="regbtn" />
<map name="Map" id="Map"><area shape="rect" coords="145,11,261,45" href="http://t.sina.com.cn/reg.php" /></map>
</div> <div class="loginConn">
<div class="loginConn_l">
<ul class="imgList" id="imgList"> </ul>
<div class="clear"></div> <div class="txtList">
<div class="txtBox">
<div class="imgtop"></div>
<div class="txtBox">
<div id="txtBoxCon"> <!--循环列表-->
<div class="list"><div class="clear"></div>
</div>
<!--循环列表结束-->
</div> </div>
<div class="imgbot"></div>
</div>
</div> <!--大家正在讨论-->
<div class="hotTxt">
</div> </div> <!--右侧开始-->
<div class="loginConn_r">
<div class="loginBox">
<div id="login_form">
<table>
<tr><th></th><td style="color: red;" id="errortip" class="yzm"></td></tr> <tr>
<th>登录名</th>
<td>
<div class="inputBg">
<input type="text" id="loginname" onkeyup="selectmail();">
<ul id="mailul" style="float:left;display:none;position:absolute;z-index:1;right:260px;top:250px;background:white;padding:5px;line-height:20px;width:200px;border:1px solid #EEEEEE">
<li class="li">请选择登陆类型</li>
<li class="li"></li>
<li class="li">@sina.com</li>
<li class="li">@vip.sina.com</li>
<li class="li">@163.com</li>
<li class="li">@sohu.com</li>
<li class="li">@gmail.com</li>
<li class="li">@hotmail.com</li>
<li class="li">@126.com</li>
<li class="li">@qq.com</li>
</ul>
</div>
</td>
</tr>
<tr>
<th>密 码</th><td><div class="inputBg"><input type="password" id="password" /></div></td>
</tr>
<tr>
<th></th><td><input type="checkbox" id="remusrname" checked/> 记住登录状态<a href="http://login.sina.com.cn/cgi/getpwd/getpwd0.php?entry=sso" style="margin-left:30px;">找回密码</a></td>
</tr>
<tr>
<th></th><td class="ms">建议在网吧/公用电脑上取消该选项</td>
</tr>
<tr>
<th></th><td><a href="#" id="login_submit_btn"><img src="http://i1.sinaimg.cn/blog/miniblog/yunying/newunlogin/btn.gif" /></a></td>
</tr>
</table>
</div>
</div>
<a style="display: block; height: 80px; width: 250px; margin-top: 180px;" href="http://news.sina.com.cn/wap/miniblog.html"></a>
</div>
<div class="clear"></div>
</div>
<!--内容结束--> </div>
</div></body>
</html>
<!-----------------模拟登陆弹出框js程序--------------->
<script type="text/javascript">
function selectmail()
{
var addressAry = new Array("@sina.com","@vip.sina.com","@163.com","@sohu.com","@gmail.com","@hotmail.com","@126.com","@qq.com");
document.getElementById("mailul").style.display = 'block';
var username = document.getElementById("loginname").value;
var flag = '';
if(username.indexOf('@') != -1)
{
var usr = username.substr(username.indexOf('@'));
usr = usr.replace(/(\s*$)/g, "");
for(var key in addressAry)
{
var add = addressAry[key];
if(add.indexOf(usr) != -1)
{
flag += eval(key)+2;
flag = flag+',';
}
}
if(flag == '')
{
flag = 'off';
}
}
var lis = document.getElementById("mailul").getElementsByTagName("li");
lis[1].style.background = "#EEEEFF";
for(var i=1;i<lis.length;i++)
{
var p = i;
(function()
{
if(flag)
{
if(flag == 'off')
{
lis[p].style.display = "none";
lis[1].style.display = "block";
}else
{
lis[p].style.display = "none";
flagAry = flag.split(',');
for(var key in flagAry)
{
if(flagAry[key] != '')
{
lis[flagAry[key]].style.display = "block";
}
}
}
lis[1].style.display = "block";
}else if(username.split('@').length>2)
{
lis[p].style.display = "none";
lis[1].style.display = "block";
//preliText = '';
}else
{
lis[p].style.display = "block";
}
preliText = lis[p].innerHTML;
lis[p].style.cursor = "pointer";
var address = preliText.substr(preliText.lastIndexOf('@'));
if(username.lastIndexOf('@') == -1)
{
lis[p].innerHTML = username+address;
}else
{
lis[p].innerHTML = username.substring(0,username.lastIndexOf('@'))+address;
}
if(p == 1) lis[p].innerHTML = username;
lis[p].onclick = selectloginname;
lis[p].onmouseover = mouseover;
lis[p].onmouseout = mouseout;
})()
}
}
function mouseover()
{
var lis = document.getElementById("mailul").getElementsByTagName("li");
for(var i=1;i<lis.length;i++)
{
lis[i].style.background = '';
}
this.style.background = "#EEEEFF";
}
function mouseout()
{
var lis = document.getElementById("mailul").getElementsByTagName("li");
for(var i=1;i<lis.length;i++)
{
lis[i].style.background = '';
}
lis[1].style.background = '#EEEEFF';
}
function selectloginname()
{
document.getElementById("loginname").value = '';
document.getElementById("loginname").value = this.innerHTML;
document.getElementById("mailul").style.display = 'none';
}
</script>
<!-----------------模拟登陆弹出框js程序--------------->
<script type="text/javascript">
function circle()
{
var liAry = new Array();
var lis = document.getElementById("mailul").getElementsByTagName("li");
var len = lis.length;
for(var o=0;o<len;o++)
{
if(lis[o].style.display == "block" || lis[o].style.display =="")
{
liAry.push(o);
}
}
return liAry;
}
function selectmail()
{
var liAry = circle();
var e= window.event;
var _e = e.keyCode;
if(document.getElementById("mailul").style.display == 'none' && (_e >= 37 && _e <= 40))
{
return false;
}
var addressAry = new Array("@sina.com","@vip.sina.com","@163.com","@sohu.com","@gmail.com","@hotmail.com","@126.com","@qq.com");
document.getElementById("mailul").style.display = 'block';
var username = document.getElementById("loginname").value;
var flag = '';
if(username.indexOf('@') != -1)
{
var usr = username.substr(username.indexOf('@'));
usr = usr.replace(/(\s*$)/g, "");
for(var key in addressAry)
{
var add = addressAry[key];
if(add.indexOf(usr) != -1)
{
flag += eval(key)+2;
flag = flag+',';
}
}
if(flag == '')
{
flag = 'off';
}
}
var lis = document.getElementById("mailul").getElementsByTagName("li");
lis[1].style.background = "#eeeeff";
var len = lis.length;
var lenAry = liAry.length;
var _c=1;
for(var o=1;o<lenAry;o++)
{
var pos = liAry[o];
if(lis[pos].style.background == "#eeeeff")
{
_c = o;
}
}
var _s=true;
(_c>lenAry-1 || _c<1) ? _s=false : ""; if( _e==40 && _s )
{
pos = liAry[_c];
lis[1].style.background = "";
lis[pos].style.background = "";
(_c >= lenAry-1) ? _c=1 : _c ++;
pos = liAry[_c];
lis[pos].style.background = "#eeeeff";
}
if( _e==38 && _s )
{
pos = liAry[_c];
lis[1].style.background = "";
lis[pos].style.background = "";
_c--<=1 ? _c = lenAry-1 : "";
pos = liAry[_c];
lis[pos].style.background = "#eeeeff";
}
if( _e==37 || _e==39)
{
pos = liAry[_c];
lis[pos].style.background = "";
lis[1].style.background = "#eeeeff";
}
for(var i=1;i<len;i++)
{
var p = i;
(function()
{
if(flag)
{
if(flag == 'off')
{
lis[p].style.display = "none";
lis[1].style.display = "block";
}else
{
lis[p].style.display = "none";
flagAry = flag.split(',');
for(var key in flagAry)
{
if(flagAry[key] != '')
{
lis[flagAry[key]].style.display = "block";
}
}
}
lis[1].style.display = "block";
}else if(username.split('@').length>2)
{
lis[p].style.display = "none";
lis[1].style.display = "block";
//preliText = '';
}else
{
lis[p].style.display = "block";
}
preliText = lis[p].innerHTML;
lis[p].style.cursor = "pointer";
var address = preliText.substr(preliText.lastIndexOf('@'));
if(username.lastIndexOf('@') == -1)
{
lis[p].innerHTML = username+address;
}else
{
lis[p].innerHTML = username.substring(0,username.lastIndexOf('@'))+address;
}
if(p == 1) lis[p].innerHTML = username;
lis[p].onclick = selectloginname;
lis[p].onmouseover = mouseover;
lis[p].onmouseout = mouseout;
})()
}
}
function mouseover()
{
var lis = document.getElementById("mailul").getElementsByTagName("li");
for(var i=1;i<lis.length;i++)
{
lis[i].style.background = '';
}
this.style.background = "#eeeeff";
}
function mouseout()
{
var lis = document.getElementById("mailul").getElementsByTagName("li");
for(var i=1;i<lis.length;i++)
{
lis[i].style.background = '';
}
lis[1].style.background = '#eeeeff';
}
function selectloginname()
{
document.getElementById("loginname").value = '';
document.getElementById("loginname").value = this.innerHTML;
document.getElementById("mailul").style.display = 'none';
}
</script>
<!-----------------模拟登陆弹出框js程序--------------->