js實(shí)現(xiàn)的早期滑動(dòng)門(mén)菜單效果代碼
本文實(shí)例講述了js實(shí)現(xiàn)的早期滑動(dòng)門(mén)菜單效果代碼。分享給大家供大家參考。具體如下:
這里介紹的是傳說(shuō)中的早期滑動(dòng)門(mén)菜單Demo代碼,測(cè)試時(shí)請(qǐng)把鼠標(biāo)放到左側(cè)相應(yīng)的導(dǎo)航欄目上,放在左側(cè)菜單上的時(shí)候,你就發(fā)現(xiàn)玄機(jī)了,右側(cè)的內(nèi)容會(huì)跟著變化,JS與HTML結(jié)合實(shí)現(xiàn)的,比較傳統(tǒng)的導(dǎo)航效果。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/
具體代碼如下:
<HTML> <HEAD> <TITLE>文字導(dǎo)航效果--滑動(dòng)門(mén)</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> </HEAD> <BODY bgColor=#fef4d9> <CENTER> <TABLE borderColor=#993399 border=5 borderlight="green"> <TBODY> <TR> <TD align=middle> <SCRIPT language=JavaScript> <!-- Begin var linktext=new Array() linktext[0]='<table border="0" width="210" height="185" bgcolor="#EFEFEF" cellpadding="8" cellspacing="0"><tr><td valign="top">國(guó)內(nèi)最常用的校友錄站點(diǎn)</td></tr></table>' linktext[1]='<table border="0" width="210" height="185" bgcolor="#D1FD80" cellpadding="8" cellspacing="0"><tr><td valign="top">國(guó)內(nèi)最大的游戲網(wǎng)站-第九城市</td></tr></table>' linktext[2]='<table border="0" width="210" height="185" bgcolor="#FDB9FD" cellpadding="8" cellspacing="0"><tr><td valign="top">國(guó)內(nèi)最大的新聞發(fā)布類(lèi)站點(diǎn)-新浪網(wǎng)</td></tr></table>' linktext[3]='<table border="0" width="210" height="185" bgcolor="#FFFF5E" cellpadding="8" cellspacing="0"><tr><td valign="top">國(guó)內(nèi)最大的綜合性?shī)蕵?lè)站點(diǎn)--網(wǎng)易</td></tr></table>' linktext[4]='<table border="0" width="210" height="185" bgcolor="#C2D7FC" cellpadding="8" cellspacing="0"><tr><td valign="top">最大的搜索引擎站點(diǎn)...百度</td></tr></table>' var ns6=document.getElementById&&!document.all var ie=document.all function show_text(thetext, whichdiv){ if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext] else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext] } function reset(whichdiv){ if (ie) eval("document.all."+whichdiv).innerHTML='<table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="0" cellspacing="8"><tr><td valign="top"><font face="arial" size="4"><b>請(qǐng)把鼠標(biāo)放到左側(cè)相應(yīng)的導(dǎo)航欄目上<p>有所變化</b></font></td></tr></table>' else if (ns6) document.getElementById(whichdiv).innerHTML='<table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>請(qǐng)把鼠標(biāo)放到左側(cè)相應(yīng)的導(dǎo)航欄目上<p>看到變化效果了嗎?</b></font></td></tr></table>'} // End --> </SCRIPT> <TABLE cellSpacing=0 cellPadding=3 width=370 align=center bgColor=black border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width=370 background="" border=0><TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=8 width=160 bgColor=#f88530 border=0> <TBODY> <TR> <TD onMouseOver="bgColor='#EFEFEF'; show_text(0,'div1')" style="CURSOR: hand" onclick="window.location='http://www.chinaren.com'" onmouseout="bgColor='#F88530'; reset('div1')">中國(guó)人</TD></TR> <TR> <TD onMouseOver="bgColor='#D1FD80'; show_text(1,'div1')" style="CURSOR: hand" onclick="window.location='http://www.the9.com'" onmouseout="bgColor='#F88530'; reset('div1')">第九城市</TD></TR> <TR> <TD onMouseOver="bgColor='#FDB9FD'; show_text(2,'div1')" style="CURSOR: hand" onclick="window.location='http://www.sina.com.cn'" onmouseout="bgColor='#F88530'; reset('div1')">新浪網(wǎng)</TD></TR> <TR> <TD onMouseOver="bgColor='#FFFF5E'; show_text(3,'div1')" style="CURSOR: hand" onclick="window.location='http://www.163.com'" onmouseout="bgColor='#F88530'; reset('div1')">網(wǎng)易</TD></TR> <TR> <TD onMouseOver="bgColor='#C2D7FC'; show_text(4,'div1')" style="CURSOR: hand" onclick="window.location='http://www.baidu.com'" onmouseout="bgColor='#F88530'; reset('div1')">百度一下</TD></TR></TBODY></TABLE></TD> <TD><SPAN id=div1> <TABLE height=185 cellSpacing=0 cellPadding=8 width=210 bgColor=#f88530 border=0> <TBODY> <TR> <TD vAlign=top><FONT face=arial size=4><B>請(qǐng)把鼠標(biāo)放到左側(cè)相應(yīng)的導(dǎo)航欄目上 <P>有所變化</P></B></FONT></TD></TR></TBODY></TABLE></SPAN></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </CENTER> </BODY> </HTML>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
- JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果
- JS+CSS實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)門(mén)(滑動(dòng)菜單)效果
- js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動(dòng)菜單效果代碼
- JS+CSS實(shí)現(xiàn)簡(jiǎn)易實(shí)用的滑動(dòng)門(mén)菜單效果
- JS實(shí)現(xiàn)具備延時(shí)功能的滑動(dòng)門(mén)菜單效果
- JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁(yè)滑動(dòng)門(mén)菜單效果代碼
- JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
- JS實(shí)現(xiàn)的左側(cè)豎向滑動(dòng)菜單效果代碼
相關(guān)文章
js判斷上傳文件類(lèi)型判斷FileUpload文件類(lèi)型代碼
這篇文章主要介紹了js判斷上傳文件類(lèi)型判斷FileUpload文件類(lèi)型代碼,需要的朋友可以參考下2014-05-05JS函數(shù)進(jìn)階之繼承用法實(shí)例分析
這篇文章主要介紹了JS函數(shù)進(jìn)階之繼承用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下2020-01-01基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-04-04npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04JavaScript設(shè)計(jì)模式之策略模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之策略模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法,以實(shí)例形式分析了輪詢操作的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02JS實(shí)現(xiàn)滑動(dòng)門(mén)效果的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)門(mén)效果的方法,結(jié)合實(shí)例形式分析了滑動(dòng)門(mén)效果的實(shí)現(xiàn)原理、步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12