Maison > Article > interface Web > Code d'effet de menu de porte coulissante précoce implémenté dans les compétences js_javascript

Code d'effet de menu de porte coulissante précoce implémenté dans les compétences js_javascript

WBOYoriginal: 2016-05-16 15:42:121229parcourir

L'exemple de cet article décrit le premier code d'effet de menu de porte coulissante implémenté dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ce qui est présenté ici est le légendaire code de démonstration du menu de porte coulissante Lors du test, veuillez placer la souris sur la colonne de navigation correspondante à gauche. Lorsque vous le placez dans le menu de gauche, vous découvrirez le mystère. changera en conséquence. Il est obtenu en combinant JS et HTML pour obtenir un effet de navigation plus traditionnel.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/

Le code spécifique est le suivant :

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Fonction fonction en JavaScriptArticle suivant：Fonction fonction en JavaScript

Articles Liés

Voir plus