JS+CSS实现滑动切换tab菜单效果
本⽂实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给⼤家供⼤家参考。具体如下：
这是风格简单的⼀款JS+CSS滑动门特效代码，当⿏标滑过菜单的时候，⼆级菜单⾃动切换，⿏标不需要点击，滑动门效果是个⽐较流⾏的⽹页菜单效果，在⽹上经常可看到这种菜单的⾝影。本菜单在⽕狐、IE8、Chrome下测试通过，代码兼容性还可以，⾃⼰⽤的化再美
化⼀下风格。
运⾏效果截图如下：
在线演⽰地址如下：
具体代码如下：
<!doctype html>
<html xmlns="/1999/xhtml" xmlns:xlink="/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var $=function(a,b){
var ID = ElementById(a);
var OBJ= (b)?ID.getElementsByTagName(b):ID;
return OBJ
}
var n=0;
var tab = function(MENU,BODY){
var l = MENU.length;
for(var i=0;i<l;i++){
MENU[i].onmouseover=function(a){
return function(){
MENU[n].className="label"
BODY[n].style.display = "none";
MENU[a].className="label label-selected";
BODY[a].style.display = "block";
n=a;
}
}(i);
}
}
</script>
<style>
body{font-family: "微软雅⿊","SimSun","宋体","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.
label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;} .label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
</style>
<title>myLinks</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="menu">
<ul class="category">
<li class="label label-selected">在线学习</li>
<li class="label">运动休闲</li>
<li class="label">编程社区</li>
<li class="label">⽂化娱乐</li>
<li class="label">休息项⽬</li>
<li class="label">⼈际往来</li>
</ul>
</div>
<div id="linksContent">
<div class="category-1" >
<ul>
<li class="link"><span>html学习</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>⼈⼯智能</span></li>
<li class="link"><span>算法设计</span></li>
</ul>
</div>
<div class="category-2" >
<ul>
<li class="link"><span>开车</span></li>
<li class="link"><span>郊游</span></li>
<li class="link"><span>⾳乐</span></li>
</ul>
</div>
<div class="category-2" >
<ul>
<li class="link"><span>MSDN</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>科幻电影</span></li>
<li class="link"><span>技术⽂档</span></li>
</ul>
</div>
<div class="category-2" >
<ul>
<li class="link"><span>java学习</span></li>
<li class="link"><span>html学习</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>⼈⼯智能</span></li>
<li class="link"><span>算法设计</span></li>
</ul>
</div>
<div class="category-2" >
<ul>
<li class="link"><span>html学习</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>⼈⼯智能</span></li>
</ul>
</div>
<div class="category-2" >
<ul>
<li class="link"><span>java学习</span></li>
<li class="link"><span>html学习</span></li>
<li class="link"><span>算法设计</span></li>
代码运行js特效</ul>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<script>
tab($("menu","li"),$("linksContent","div"));
</script>
</body>
</html>
希望本⽂所述对⼤家的javascript程序设计有所帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论