你的位置:首页 > 网站技术 >正文
23
二月
分类:网站技术 | 评论数:10 | 点击数:10668 | 发表日期时间:2012-02-23 10:43:20

分享到:


本文导读:

  导航条的鼠标特效经常使用到,现收集并整理出一款实用的鼠标特效,而且移植性强,推荐给大家。

正文

  导航条的鼠标特效经常使用到,现收集并整理出一款实用的鼠标特效,而且移植性强,推荐给大家。
  
  源码功能:鼠标划过菜单时显示横排的二级菜单。
  
  源码使用到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>

 

本文标签:
导航
源码
猜你喜欢:
评论:

10楼   淘宝男装  2012-5-29 11:33:16  回复该评论

嗯嗯~得好好学学

9楼   妈祖建材网  2012-3-13 15:52:25  回复该评论

很好很强大!!!

8楼   justyle男装旗舰店  2012-3-7 22:58:54  回复该评论

这个很实用啊

7楼   瘦腿精油  2012-3-7 19:49:29  回复该评论

恩..这个代码好..收藏了

6楼   桂林最好的男科  2012-3-1 15:46:27  回复该评论

这个很有用,很详细。谢谢

5楼   Firm  2012-2-28 0:55:15  回复该评论

如果能搞个演示,那就再好不过了。

4楼   道依茨  2012-2-27 16:26:55  回复该评论

谢谢分享,支持下

3楼   去痘印博客  2012-2-26 18:00:47  回复该评论

好好 很强大

2楼   25米  2012-2-25 17:05:50  回复该评论

不错,学到了好多东西,顶一下!

1楼   旋转门  2012-2-24 9:07:54  回复该评论

真不错哦,又学习了

昵称(必填)

邮箱

网址

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。