search

Home >Web Front-end >JS Tutorial >JS realizes the effect of imitating Yahoo homepage quick login entrance and navigation module_javascript skills

JS realizes the effect of imitating Yahoo homepage quick login entrance and navigation module_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:38:381474browse

The example in this article describes the JS implementation of the Yahoo homepage quick login entrance and navigation module effects. Share it with everyone for your reference. The details are as follows:

This is a JS code that implements a quick entry navigation module imitating the Yahoo homepage website. There is a user login box in it. You may use this. It is also good to put it on the front page of your website as a user login.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows: 

<!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>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：360-degree rotation of product images based on jQuery Circlr plug-in_jqueryNext article：360-degree rotation of product images based on jQuery Circlr plug-in_jquery

Related articles

See more