suchen

Heim >Web-Frontend >js-Tutorial >JS erkennt den Effekt der Nachahmung der Schnellanmeldungs- und Navigationsmodule_Javascript-Fähigkeiten der Yahoo-Homepage

JS erkennt den Effekt der Nachahmung der Schnellanmeldungs- und Navigationsmodule_Javascript-Fähigkeiten der Yahoo-Homepage

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

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung der Yahoo-Homepage-Schnellanmeldung und der Auswirkungen des Navigationsmoduls. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein JS-Code, der ein Schnelleingabe-Navigationsmodul implementiert, das die Yahoo-Homepage-Website imitiert. Sie können es auch auf der Startseite Ihrer Website verwenden ein Benutzer-Login.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：360-Grad-Rotation von Produktbildern basierend auf jQuery Circlr plug-in_jqueryNächster Artikel：360-Grad-Rotation von Produktbildern basierend auf jQuery Circlr plug-in_jquery

In Verbindung stehende Artikel

Mehr sehen