话说,浏览网站的时候经常会碰见各式各样的 滑动菜单,感觉都挺不错的。
可是一直都没时间学,尤其 Js 都没系统的学过,更确切的说 啥 都不会。
今天突然想到了,js滑动菜单问题。 故baidu了一把。
找了一个 最简单的源代码。
原理:调用onmuseover 和 Onmuseout 事件
JS代码: 16:17:52 16:17:47
<script language="javascript">
function msg(){
document.getElementById("msg1").style.display="none"
document.getElementById("msg2").style.display="none"
}
function msgnone(ms,cont){
document.getElementById(ms).style.display='block'
document.getElementById(cont).style.display='none'
}
function aa1(){
document.getElementById("content1").style.display="block"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa2(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="block"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa3(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="block"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa4(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="block"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa5(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="block"
document.getElementById("content6").style.display="none"
}
function aa6(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="block"
}
</script>
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>
效果图: 点击第一个设计之家。
.
点击关闭
鼠标移到第四个