ホームページ > 記事 > ウェブフロントエンド > js_javascript スキルに実装された初期の引き戸メニュー効果コード
js_javascript スキルに実装された初期の引き戸メニュー効果コード
- WBOYオリジナル
- 2016-05-16 15:42:121229ブラウズ
この記事の例では、js で実装された初期のスライディング ドア メニュー効果コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここで紹介するのは、伝説の初期のスライディングドアメニューのデモコードです。 テストする場合は、左のメニューにマウスを置くと、その内容がわかります。これは、JS と HTML を組み合わせて、より伝統的なナビゲーション効果を実現することによって実現されます。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/
具体的なコードは次のとおりです:
<HTML>
<HEAD>
<TITLE>文字导航效果--滑动门</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">国内最常用的校友录站点</td></tr></table>'
linktext[1]='<table border="0" width="210" height="185" bgcolor="#D1FD80" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的游戏网站-第九城市</td></tr></table>'
linktext[2]='<table border="0" width="210" height="185" bgcolor="#FDB9FD" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的新闻发布类站点-新浪网</td></tr></table>'
linktext[3]='<table border="0" width="210" height="185" bgcolor="#FFFF5E" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的综合性娱乐站点--网易</td></tr></table>'
linktext[4]='<table border="0" width="210" height="185" bgcolor="#C2D7FC" cellpadding="8" cellspacing="0"><tr><td valign="top">最大的搜索引擎站点...百度</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>请把鼠标放到左侧相应的导航栏目上<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>请把鼠标放到左侧相应的导航栏目上<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')">中国人</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')">新浪网</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')">网易</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>请把鼠标放到左侧相应的导航栏目上
<P>有所变化</P></B></FONT></TD></TR></TBODY></TABLE></SPAN></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptの関数関数次の記事：JavaScriptの関数関数