JS实现仿雅虎首页快捷登录入口及导航模块效果

前端技术 2023/09/02 JavaScript

本文实例讲述了JS实现仿雅虎首页快捷登录入口及导航模块效果。分享给大家供大家参考。具体如下：

这是一款JS实现仿雅虎首页网站快捷入口导航模块的代码，里面有用户登录框，这个大家或许会用上吧，放到你网站着页作为用户登录也挺行。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-f-yahoo-index-login-style-codes/

具体代码如下：

<!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\" />
<title>仿雅虎首页网站快捷入口和快</title>
<style>
*{ margin:0; padding:0; border:none;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif; height:100%;}li{list-style:none;}
html{ height:100%;}
.clearfix:after{content:\" \";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.rrow{width:224px;}
.login{ background:url(images/box.png); height:210px;width:224px; overflow:hidden;}
.login h2{ color:#fff; font-size:14px; padding:4px 12px; line-height: 30px;height:24px; overflow:hidden; }
.login h2 span{ font-size:12px; float:right;margin:-31px 23px 0 0;line-height: 32px;font-weight:400; cursor:pointer;}
.rrow ul{ margin:5px 6px; }
.rrow ul li {width:216px; height:31px;margin-bottom: 5px; overflow:hidden; float:left;}
.rrow ul li a,.rrow ul li span{ cursor:pointer; display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -152px; width:69px;padding-left:35px; height:31px; overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .lhover{ display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -183px; width:69px;padding-left:35px; height:37px; overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .yhzc{ background:url(images/title.gif) 0 -152px;}
#yhzc{background:url(images/title.gif) 0 -183px;height:37px;}
.rrow ul li .hysj{ background:url(images/title.gif) -104px -152px; }
#hysj{ background:url(images/title.gif) -104px -183px;height:37px;}
.rrow ul li .fbxx{ background:url(images/title.gif) 0 -220px; }
#fbxx{ background:url(images/title.gif) 0 -251px;height:37px;}
.rrow ul li .gstg{ background:url(images/title.gif) -104px -220px; }
#gstg{ background:url(images/title.gif) -104px -251px;height:37px;}
.rrow ul li .xzmj{ background:url(images/title.gif) 0 -288px; }
#xzmj{ background:url(images/title.gif) 0 -319px;height:37px;}
.rrow ul li .bzzx{ background:url(images/title.gif) -104px -288px; }
#bzzx{ background:url(images/title.gif) -104px -319px;height:37px;}
.rrow ul .hoverli{background:url(images/title.gif) 0 -357px;height:92px; overflow:hidden; line-height: 32px; font-weight:700;}
.qlogin{height:92px; width:210px; line-height: 32px; margin:5px 0 0 10px; display:none;}
.qlogin dt{ height:0; overflow:hidden; }
.qlogin dd{ padding:4px; width:210px; height:22px; text-align:left; float:left;clear:both;overflow:hidden;}
.qlogin dd .passw,.qlogin a:hover.passw{ margin: -4px 12px 0 0; float:right;}
.rrow ul li div{ margin-top: 5px; width:210px; display:none;}
.rrow ul li div a,.rrow ul li div a:hover{background:url(images/title.gif) -80px -1px; height:20px; line-height: 20px; clear:both; font-weight: 400; width:170px;}
.rrow ul li div a:hover{ text-decoration:underline; }
.rrow ul li .block,.rrow .block{ display:block; }
.rrow ul .none{ display:none; }
.btn{font-size:12px; font-family:宋体; float:left; width:57px; height:20px; overflow:hidden; background:url(images/title.gif); line-height: 21px;padding-left:18px;margin-right: 10px; }
a:hover.btn{background:url(images/title.gif) 0 -20px;}
#btn4{background:url(images/title.gif);width:75px; margin-left: 48px; cursor:pointer;}
.input2{font-size:12px; border:1px solid #999; width:140px; height:16px; padding:1px 2px 0 2px; }
</style>
</head>
<body>
<table width=\"18%\" height=\"420\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">
 <tr>
 <td><div class=\"rrow\">
  <div id=\"login\" class=\"login\">
  <h2>便捷入口<span><a class=\"w\" title=\"快速登陆\">快速登陆</a></span></h2>
  <dl class=\"qlogin clearfix\">
   <dt>快速登陆</dt>
   <dd>用户名：
    <input name=\"text\" type=\"text\" class=\"input2\" />
   </dd>
   <dd>密   码：
    <input name=\"password\" type=\"password\" class=\"input2\" />
   </dd>
   <dd>
   <input name=\"submit\" type=\"submit\" class=\"btn\" id=\"btn4\" value=\"立即登陆\" />
   <a class=\"passw\" href=\"#\" target=\"_blank\">忘记密码？</a></dd>
  </dl>
  <ul>
   <li id=\"btype1\" class=\"hoverli\"><span class=\"yhzc\" id=\"yhzc\" href=\"#\" target=\"_blank\" title=\"用户注册\">用户注册</span><span class=\"hysj\" href=\"#\" target=\"_blank\" title=\"会员升级\">会员升级</span>
    <div class=\"block\"><a href=\"#\" target=\"_blank\">1...</a><a href=\"#\" target=\"_blank\">1...</a></div>
   <div><a href=\"#\" target=\"_blank\">2...</a><a href=\"#\" target=\"_blank\">2...</a></div>
   </li>
   <li id=\"btype2\"><span class=\"fbxx\" href=\"#\" target=\"_blank\" title=\"发布信息\">发布信息</span><span class=\"gstg\" href=\"#\" target=\"_blank\" title=\"公司推广\">公司推广</span>
    <div><a href=\"#\" target=\"_blank\">3...</a><a href=\"#\" target=\"_blank\">3...</a></div>
   <div><a href=\"#\" target=\"_blank\">4...</a><a href=\"#\" target=\"_blank\">4...</a></div>
   </li>
   <li id=\"btype3\"><span class=\"xzmj\" href=\"#\" target=\"_blank\" title=\"寻找买家\">寻找买家</span><span class=\"bzzx\" href=\"#\" target=\"_blank\" title=\"帮助中心\">帮助中心</span>
    <div><a href=\"#\" target=\"_blank\">5...</a><a href=\"#\" target=\"_blank\">5...</a></div>
   <div><a href=\"#\" target=\"_blank\">6...</a><a href=\"#\" target=\"_blank\">6...</a></div>
   </li>
  </ul>
  </div>
  <script type=text/javascript>
   var login = document.getElementById(\"login\");
var yhzc = document.getElementById(\"yhzc\");
var h2 = login.getElementsByTagName(\"h2\");
var dl = login.getElementsByTagName(\"dl\");
var ul = login.getElementsByTagName(\"ul\");
var lis = ul[0].getElementsByTagName(\"li\");
var allspan = ul[0].getElementsByTagName(\"span\");
var qlog = h2[0].getElementsByTagName(\"a\");
var divs = login.getElementsByTagName(\"div\");
qlog[0].onclick = function()
{
for(var i = 0; i < divs.length; i++)
{divs[i].className = null;}
for(var i = 0; i < allspan.length; i++)
{allspan[i].id = null;}
lis[0].className = \"none\";
dl[0].className = \"qlogin block\";
}
for(var x = 1; x < 4; x++)
{show();}
function show()
{
var test = \"btype\" +x;
var btype = document.getElementById(\"btype\" + x);
var as = btype.getElementsByTagName(\"a\");
var bdivs = btype.getElementsByTagName(\"div\");
var spans = btype.getElementsByTagName(\"span\");
for(var i = 0; i < spans.length; i++)
{
spans[i].num = i;
spans[i].onmouseover = type;
}
function type()
{
for(var i = 0; i < lis.length; i++)
{lis[i].className = null;}
for(var i = 0; i < allspan.length; i++)
{allspan[i].id = null;}
for(var i = 0; i < divs.length; i++)
{divs[i].className = null;}
dl[0].className = \"qlogin\";
yhzc.id = null;
spans[this.num].id = spans[this.num].className;
bdivs[this.num].className = \"block\";
btype.className = \"hoverli\";
}
}
   </script>
 </div>  
 </td>
 </tr>
</table>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4389

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案