你的位置:首页 > 网站技术 >正文
23
二月
分类:网站技术 | 评论数:10 | 点击数:10438 | 发表日期时间: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  回复该评论

嗯嗯~得好好学学


Fatal error: Uncaught Error: Call to undefined function mysql_num_rows() in C:\wwwroot\v2.ni-blog.com\public\web\info_show.php:308 Stack trace: #0 {main} thrown in C:\wwwroot\v2.ni-blog.com\public\web\info_show.php on line 308