本文导读：
导航条的鼠标特效经常使用到，现收集并整理出一款实用的鼠标特效，而且移植性强，推荐给大家。
导航条的鼠标特效经常使用到，现收集并整理出一款实用的鼠标特效，而且移植性强，推荐给大家。
源码功能：鼠标划过菜单时显示横排的二级菜单。
源码使用到JSCSSHTML，在IE9上运行成功。
使用时，只需要修改菜单名称及CSS的值即可
以下源码：
1、javascrip文件:nav.js,跟主文件放在同一目录下，给主文件调用。
var num=8;
function getObj(objName){return(document.getElementById(objName));}
function tag(id){
getObj("searconrow2").innerHTML=getObj("produce"+id).innerHTML;
for(var i=1;i<=num;i++){
if(i==id) {
getObj("changebox"+i).className="search1";
}
else{
if(i==3 || i==(id-1)){
getObj("changebox"+i).className="search3";}
else{
getObj("changebox"+i).className="search2";}
}
}
}
function loadme(){
getObj("searconrow2").innerHTML=getObj("produce1").innerHTML;
}
2、运行文件的代码index.html
<script src="js/main.js" type="text/javascript"></script>
<style>
#twopage{width:1000px; height:40px; margin:0px auto; overflow:hidden}
#twopage ul{width:1000px; height:56px; margin:0px; list-style-type:none; overflow:hidden}
#twopage ul li{ float:left; padding:12px 0px; height:28px; margin:0px;overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#660099}
.hiddenbox{
display:none;
text-aligh:center;
margin-left:500px;
border:1px #000 solid;
}
#searchcontent a{
color:#FFF;}
#searchcontent a:hover{
color:#674004;}
</style>
</head>
<body>
<div id="twopage">
<UL>
<li><img src="images/index2_09.jpg" width="13" height="28" alt=""></li>
<LI class="search1" id="changebox1"onmouseover="javascript:tag(1);this.blur();"><a href="/">首页</a></LI>
<LI class="search2" id="changebox2"onmouseover="javascript:tag(2);this.blur();"><a href="pingpai.asp">公司介绍</a></LI>
<LI class="search3" id="changebox3"onmouseover="javascript:tag(3);this.blur();"><a href="products.asp">产品信息</a></LI>
<LI class="search3" id="changebox4"onmouseover="javascript:tag(4);this.blur();">公司新闻</LI>
<LI class="search3" id="changebox5"onmouseover="javascript:tag(5);this.blur();"><a href="news.asp">联系我们</LI>
</UL>
</div>
<DIV id=searchcontent>
<DIV id="searconrow2"></DIV>
<DIV class="hiddenbox" id="produce1" >
<a href="jiameng.asp?id=33">二级菜单1</a> <a href="jiameng.asp?id=34">二级菜单2</a> <a href="#">二级菜单3</a>
</DIV>
<DIV class="hiddenbox" id="produce2"></DIV>
<DIV class="hiddenbox" id="produce3"></DIV>
<DIV class="hiddenbox" id="produce4"></DIV>
<DIV class="hiddenbox" id="produce5"></DIV>
</DIV>
上一篇：微妙的变化就改变一切
下一篇：三月桃花开啦
8楼 justyle男装旗舰店 2012-3-7 22:58:54 回复该评论
这个很实用啊