⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 menudraw.htm

📁 JavaScript实例
💻 HTM
字号:
🔍 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../homepage.css">
<style>#D1 {
	BACKGROUND-COLOR: lightblue;
	BORDER-BOTTOM: white 2px outset; 
	BORDER-LEFT: white 2px outset; 
	BORDER-RIGHT: white 2px outset;
	BORDER-TOP: white 2px outset; LEFT: 0px;
	POSITION: absolute; TOP: 190px; VISIBILITY: hidden;
	WIDTH: 200px; layer-background-color: lightblue
}
</style>
<script language="javascript">
function menuIn() {
        if(n4) {
                clearTimeout(out_ID)
                if( menu.left > menuW*-1+20+10 ) { 
                        menu.left -= 8
                        in_ID = setTimeout("menuIn()", 1)
                }
                else if( menu.left > menuW*-1+20 ) {
                        menu.left--
                        in_ID = setTimeout("menuIn()", 1)
                }
        }
        else { 
                clearTimeout(out_ID)
                if( menu.pixelLeft > menuW*-1+20+10 ) {
                        menu.pixelLeft -= 4
                        in_ID = setTimeout("menuIn()", 1) 
                }
                else if( menu.pixelLeft > menuW*-1+20 ) {
                        menu.pixelLeft--
                        in_ID = setTimeout("menuIn()", 1)
                }
        }
}
function menuOut() {
        if(n4) {
                clearTimeout(in_ID)
                if( menu.left < -10) { 
                        menu.left += 4
                        out_ID = setTimeout("menuOut()", 1)
                }
                else if( menu.left < 0) { 
                        menu.left++
                        out_ID = setTimeout("menuOut()", 1)
                }
                
        }
        else { 
                clearTimeout(in_ID)
                if( menu.pixelLeft < -10) {
                        menu.pixelLeft += 2
                        out_ID = setTimeout("menuOut()", 1)
                }
                else if( menu.pixelLeft < 0 ) {
                        menu.pixelLeft++
                        out_ID = setTimeout("menuOut()", 1)
                }
        }
}
function fireOver() { 
        clearTimeout(F_out)
        F_over = setTimeout("menuOut()", 10)
}
function fireOut() { 
        clearTimeout(F_over)
         F_out = setTimeout("menuIn()", 10)
}
function init() {
        if(n4) {
                menu = document.D1
                menuW = menu.document.width
                menu.left = menuW*-1+20                                 
                document.D1.onmouseover = menuOut
                document.D1.onmouseout = menuIn
		menu.visibility = "visible"
        }
        else if(e4) { 
                menu = D1.style
                menuW = D1.offsetWidth
                D1.style.pixelLeft = menuW*-1+20
                D1.onmouseover = fireOver
                D1.onmouseout = fireOut
                D1.style.visibility = "visible"
        }
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
</script>
</head>

<body bgcolor="#FFFFFF" onload="init()">
<script language="Javascript" src="/pub/js/head.js"></script>
<table width="760" height="20" border=0 cellspacing="0" cellpadding="0" align="center" >
  <tr bgcolor="CFDFFF"> 
    <td height=20 class="p1" align="left"><img src="/pc/img/blank.gif" width="12" height="8"><font color="#000000"><font color="#FF9966">当前位置</font>：<a href="/default.htm" class="under">洪恩在线</a> 
      -&gt; <a href="/pc/index.htm" class="under">电脑乐园</a> -&gt; JavaScript</font></td>
  </tr>
</table>
<div id="D1"> 
        <table border="0">
          <tr> 
            <td align="middle"><b style="COLOR: green">菜单</b></td>
          </tr>
          <tr> 
            <td>
              <ul>
                <li><a href="http://www.hongen.com">洪恩在线</a> </li>
                <li><a href="http://www.teacher.edu.cn">中国园丁网</a> </li>
                <li><a href="http://www.sina.com.cn">新浪网</a> </li>
              </ul>
            </td>
          </tr>
        </table>
      </div>
      
    
<table width="760" border=0 cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td width="207" valign="top"><img src="img/bule.gif" width="207" height="13"></td>
    <td bgcolor="A8A8AB" width="1"><img src="img/blank.gif" width="1" height="1"></td>
    <td align="right" height="22" width=530><img src="img/js.gif" width="186" height="20"></td>
    <td width="22"><img src="img/blank.gif" width="1" height="1"></td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td width="124"><img src="img/blank.gif" width="1" height="1"></td>
    <td background="img/line.gif" height="27" width=636><img src="img/blank.gif" width="1" height="1"></td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td class=p3 align="center" width=711><b>　　　　推 拉 式 菜 单</b></td>
    <td class="p2" width="1" bgcolor="A8A8AB"><img src="img/blank.gif" width="1" height="1"></td>
    <td class="p2" width="48">&nbsp;</td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td align="center" valign="top">&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="5F74BF" width="28" align="center"><img src="img/bule1.gif" width="28" height="49"></td>
    <td width="37" align="center">&nbsp;</td>
  </tr>
  <tr> 
    <td align="center" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="center"> 
          <td> 
            <table width="110" border="0" cellspacing="0" cellpadding="0">
              <tr bgcolor="5F74BF" align="center"> 
                <td class="p1" align="right"><b><font color="#FFFFFF">效 果 演 示</font></b><font color="#FFFFFF">：</font></td>
                <td class="p1" width="11"><img src="img/bule2.gif" width="11" height="18"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td class=p2 align="left" > 
      
      <p>&nbsp;</p>
      <p><font color="#FF6666"><b>看到屏幕边上有一个蓝框了吗？把它拉出来！</b></font></p>
      <p>　</p>
      
    </td>
    <td bgcolor="5F74BF" width="28" align="center">&nbsp;</td>
    <td width="37" align="center">&nbsp;</td>
  </tr>
  <tr> 
    <td align="center" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td height="15">&nbsp;</td>
        </tr>
        <tr align="center"> 
          <td> 
            <table width="110" border="0" cellspacing="0" cellpadding="0">
              <tr bgcolor="5F74BF" align="center"> 
                <td class="p1" align="right"><b><font color="#FFFFFF">源代码如下</font></b><font color="#FFFFFF">：</font></td>
                <td class="p1" width="11"><img src="img/bule2.gif" width="11" height="18"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td width="457" class="p2" valign="top"><b><br>
      <br>
      </b><span class="p1"><font color="#6633FF"> </font></span><b><br>
      </b>
      <form>
        <p><span class="p1"><font color="#6633FF">这段程序放在&lt;head&gt;与&lt;/head&gt;之间</font></span></p>
        <p> 
          <textarea name="textarea" onFocus="this.select()" onMouseOver="this.focus()" cols="50" rows="10" wrap="VIRTUAL" style="BACKGROUND-COLOR: #D5E9FD;" >&lt;style&gt;#D1 {
	BACKGROUND-COLOR: lightblue;
	BORDER-BOTTOM: white 2px outset; 
	BORDER-LEFT: white 2px outset; 
	BORDER-RIGHT: white 2px outset;
	BORDER-TOP: white 2px outset; LEFT: 0px;
	POSITION: absolute; TOP: 70px; VISIBILITY: hidden;
	WIDTH: 200px; layer-background-color: lightblue
}
&lt;/style&gt;
&lt;script language=&quot;javascript&quot;&gt;
function menuIn() {
        if(n4) {
                clearTimeout(out_ID)
                if( menu.left &gt; menuW*-1+20+10 ) { 
                        menu.left -= 8
                        in_ID = setTimeout(&quot;menuIn()&quot;, 1)
                }
                else if( menu.left &gt; menuW*-1+20 ) {
                        menu.left--
                        in_ID = setTimeout(&quot;menuIn()&quot;, 1)
                }
        }
        else { 
                clearTimeout(out_ID)
                if( menu.pixelLeft &gt; menuW*-1+20+10 ) {
                        menu.pixelLeft -= 4
                        in_ID = setTimeout(&quot;menuIn()&quot;, 1) 
                }
                else if( menu.pixelLeft &gt; menuW*-1+20 ) {
                        menu.pixelLeft--
                        in_ID = setTimeout(&quot;menuIn()&quot;, 1)
                }
        }
}
function menuOut() {
        if(n4) {
                clearTimeout(in_ID)
                if( menu.left &lt; -10) { 
                        menu.left += 4
                        out_ID = setTimeout(&quot;menuOut()&quot;, 1)
                }
                else if( menu.left &lt; 0) { 
                        menu.left++
                        out_ID = setTimeout(&quot;menuOut()&quot;, 1)
                }
                
        }
        else { 
                clearTimeout(in_ID)
                if( menu.pixelLeft &lt; -10) {
                        menu.pixelLeft += 2
                        out_ID = setTimeout(&quot;menuOut()&quot;, 1)
                }
                else if( menu.pixelLeft &lt; 0 ) {
                        menu.pixelLeft++
                        out_ID = setTimeout(&quot;menuOut()&quot;, 1)
                }
        }
}
function fireOver() { 
        clearTimeout(F_out)
        F_over = setTimeout(&quot;menuOut()&quot;, 10)
}
function fireOut() { 
        clearTimeout(F_over)
         F_out = setTimeout(&quot;menuIn()&quot;, 10)
}
function init() {
        if(n4) {
                menu = document.D1
                menuW = menu.document.width
                menu.left = menuW*-1+20                                 
                document.D1.onmouseover = menuOut
                document.D1.onmouseout = menuIn
		menu.visibility = &quot;visible&quot;
        }
        else if(e4) { 
                menu = D1.style
                menuW = D1.offsetWidth
                D1.style.pixelLeft = menuW*-1+20
                D1.onmouseover = fireOver
                D1.onmouseout = fireOut
                D1.style.visibility = &quot;visible&quot;
        }
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
&lt;/script&gt;</textarea>
        </p>
        <p><span class="p1"><font color="#6633FF">这段程序放在&lt;body&gt;与&lt;/body&gt;之间</font></span></p>
        <p> 
          <textarea name="textarea2" onFocus="this.select()" onMouseOver="this.focus()" cols="50" rows="10" wrap="VIRTUAL" style="BACKGROUND-COLOR: #D5E9FD;" >&lt;div id=&quot;D1&quot;&gt; 
        &lt;table border=&quot;0&quot;&gt;
          &lt;tr&gt; 
            &lt;td align=&quot;middle&quot;&gt;&lt;b style=&quot;COLOR: green&quot;&gt;菜单&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt; 
            &lt;td&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;http://www.hongen.com&quot;&gt;洪恩在线&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;http://www.teacher.edu.cn&quot;&gt;中国园丁网&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;http://www.sina.com.cn&quot;&gt;新浪网&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;</textarea>
        </p>
        <p><span class="p1"><font color="#6633FF">这段程序放在&lt;body ****&gt;正文中</font></span></p>
        <p> 
          <textarea name="textarea3" onFocus="this.select()" onMouseOver="this.focus()" cols="50" rows="2" wrap="VIRTUAL" style="BACKGROUND-COLOR: #D5E9FD;" >onload=&quot;init()&quot;</textarea>
        </p>
      </form>
      <b> </b></td>
    <td bgcolor="5F74BF" width="28" align="center">&nbsp;</td>
    <td width="37" align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" valign="bottom"> 
      <table width="238" border="0" cellspacing="0" cellpadding="0">
        <tr align="center"> 
          <td> 
            <table width="110" border="0" cellspacing="0" cellpadding="0">
              <tr bgcolor="5F74BF" align="center"> 
                
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td width="457" class="p2" valign="top">&nbsp;</td>
    <td bgcolor="5F74BF" width="28" align="center"><img src="img/bule1.gif" width="28" height="49"></td>
    <td width="37" align="center">&nbsp;</td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td class="p2" align="right" width="693"> <br>
      <table width="650" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp; </td>
        </tr>
      </table>
      <br>
      <br>
    </td>
    <td class="p2" width="18">&nbsp;</td>
    <td class="p2" width="1" bgcolor="A8A8AB"><img src="img/blank.gif" width="1" height="1"></td>
    <td class="p2" width="48">&nbsp;</td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr bgcolor="5F74BF"> 
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -