JS+CSS实现滑动切换tab菜单效果

2019-11-20 11:43:36

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下：

这是风格简单的一款JS+CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-css-move-cha-tab-menu-style-codes/

具体代码如下：

<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/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 = document.getElementById(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" style="display:block;">   <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" style="display:none;">   <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" style="display:none;">   <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" style="display:none;">   <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" style="display:none;">   <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" style="display:none;">   <ul>    <li class="link"><span>java学习</span></li>   <li class="link"><span>html学习</span></li>   <li class="link"><span>算法设计</span></li>   </ul>  </div>   </div> </div> <div id="footer"></div> </div><script> tab($("menu","li"),$("linksContent","div"));</script></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：jQuery合作伙伴左右滚动特效

下一篇：jquery图片滚动放大代码分享（1）