JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果
更新時(shí)間：2015年09月19日 09:27:56 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果。分享給大家供大家參考。具體如下：
這是一款JS實(shí)現(xiàn)仿雅虎首頁(yè)網(wǎng)站快捷入口導(dǎo)航模塊的代碼，里面有用戶(hù)登錄框，這個(gè)大家或許會(huì)用上吧，放到你網(wǎng)站著頁(yè)作為用戶(hù)登錄也挺行。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.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>仿雅虎首頁(yè)網(wǎng)站快捷入口和快</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>用戶(hù)名：
<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="用戶(hù)注冊(cè)">用戶(hù)注冊(cè)</span><span class="hysj" href="#" target="_blank" title="會(huì)員升級(jí)">會(huì)員升級(jí)</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="發(fā)布信息">發(fā)布信息</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="尋找買(mǎi)家">尋找買(mǎi)家</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>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果
- JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果
- JS+CSS實(shí)現(xiàn)的日本門(mén)戶(hù)網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果
- js實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形導(dǎo)航列表效果代碼
- JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果
- JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果
- JS實(shí)現(xiàn)帶有抽屜效果的產(chǎn)品類(lèi)網(wǎng)站多級(jí)導(dǎo)航菜單代碼
- JS實(shí)現(xiàn)仿FLASH效果的豎排導(dǎo)航代碼
- JS基于cookie實(shí)現(xiàn)來(lái)賓統(tǒng)計(jì)記錄訪客信息的方法
- js+cookies實(shí)現(xiàn)懸浮購(gòu)物車(chē)的方法
- JS設(shè)置cookie、讀取cookie、刪除cookie
- JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果
相關(guān)文章
js下將阿拉伯?dāng)?shù)字每三位一逗號(hào)分隔(如：15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號(hào)分隔(如：15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下2014-06-06
JS常見(jiàn)問(wèn)題在開(kāi)發(fā)過(guò)程中會(huì)經(jīng)常遇到過(guò)，本文整理了一些實(shí)際開(kāi)發(fā)中存在的問(wèn)題，曬出來(lái)與大家一起分享，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
JS實(shí)現(xiàn)網(wǎng)頁(yè)游戲中滑塊響應(yīng)鼠標(biāo)點(diǎn)擊移動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)游戲中滑塊響應(yīng)鼠標(biāo)點(diǎn)擊移動(dòng)效果,涉及JavaScript針對(duì)頁(yè)面鼠標(biāo)事件、滾動(dòng)事件及元素屬性等相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
js實(shí)現(xiàn)視頻播放時(shí)屏幕顯示水印
這篇文章主要為大家詳細(xì)介紹了js如何實(shí)現(xiàn)視頻播放時(shí)屏幕顯示水印的效果,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握js有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
簡(jiǎn)體中文轉(zhuǎn)換繁體中文(實(shí)現(xiàn)代碼)
本篇文章主要是對(duì)簡(jiǎn)體中文轉(zhuǎn)換繁體中文的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實(shí)例形式詳細(xì)分析了寄生組合式繼承原理、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-01-01
這篇文章主要介紹了js封裝可使用的構(gòu)造函數(shù)繼承用法,實(shí)例分析了使用屬性拷貝來(lái)實(shí)現(xiàn)拷貝繼承的技巧,需要的朋友可以參考下2015-01-01
IE php關(guān)于強(qiáng)制下載文件的代碼
這個(gè)東東，把我搞得暈暈乎乎的，F(xiàn)F下，沒(méi)有強(qiáng)制下載文件這個(gè)問(wèn)題。2008-08-08
下面小編就為大家?guī)?lái)一篇基于js 本地存儲(chǔ)(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08