初学 js 实现滑动菜单（参照网上例子）

来源：互联网发布：angular js a标签隐藏编辑：程序博客网时间：2024/05/21 17:09

话说，浏览网站的时候经常会碰见各式各样的滑动菜单，感觉都挺不错的。

可是一直都没时间学，尤其 Js 都没系统的学过，更确切的说啥都不会。

今天突然想到了，js滑动菜单问题。故baidu了一把。

找了一个最简单的源代码。

原理：调用onmuseover 和 Onmuseout 事件

JS代码： 16:17:52 16:17:47

html body 代码：

<body onLoad="aa1();msg()">
<div id="divall">
<div id="title">分类类型</div>
<div id="table1">
<table cellpadding=0 cellspacing=0 boder=0>
<tr align=center>
<td onMouseOver="this.bgColor='#33ccff';aa1();msg();this.className='changebordercolor'"
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
href="http://www.sj33.cn">设计之家</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa2();msg();this.className='changebordercolor'"
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
href="http://www.sj33.cn">设计之家</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'"
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
href="http://www.sj33.cn">设计之家</a></td>
</tr></table></div>
<div id="content1">第一个里面的内容<div onClick="msgnone('msg1','content1')">关闭</div></div>
<div id="content2">第二个里面的内容<div onClick="msgnone('msg1','content2')">关闭</div></div>
<div id="content3">第三个里面的内容<div onClick="msgnone('msg1','content3')">关闭</div></div>
<div id="msg1">没有选择类型</div>
<div id="table2">
<table cellpadding=0 cellspacing=0 boder=0>
<tr align=center>
<td onMouseOver="this.bgColor='#33ccff';aa4();msg();this.className='changebordercolor'"
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
href="http://www.sj33.cn">设计之家</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'"
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
href="http://www.sj33.cn">设计之家</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className='changebordercolor'"
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
href="http://www.sj33.cn">设计之家</a></td>
</tr></table></div>
<div id="content4">第四个里面的内容<div onClick="msgnone('msg3','content4')">关闭</div></div>
<div id="content5">第五个里面的内容<div onClick="msgnone('msg2','content5')">关闭</div></div>
<div id="content6">第六个里面的内容<div onClick="msgnone('msg2','content6')">关闭</div></div>
<div id="msg2">没有选择类型</div>
</div></body>

效果图：点击第一个设计之家。

点击关闭

鼠标移到第四个

初学 js 实现滑动菜单 （参照网上例子）

初学 js 实现滑动菜单（参照网上例子）