JQ动画导航
Posted 程序员入门到放弃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ动画导航相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery鼠标悬停3d菜单展开动画 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/93/css/index.css"> </head> <body> <div class="nav-main"> <div class="nav-box"> <div class="nav"> <ul class="nav-ul"> <li><a href="#" class="home"><span>首页</span></a></li> <li><a href="#" class="develop"><span>javascript</span></a></li> <li><a href="#" class="wechat"><span>ASP.NET</span></a></li> <li><a href="#" class="case"><span>何问起键盘</span></a></li> <li><a href="#" class="news"><span>HoverClock</span></a></li> <li><a href="#" class="contact"><span>关于何问起</span></a></li> </ul> </div> <div class="nav-slide"> <div class="nav-slide-o"></div> <div class="nav-slide-o"> <ul> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> <li><a href="#"><span>hewenqi</span></a></li> </ul> </div> <div class="nav-slide-o"> <ul> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> <li><a href="#"><span>HoverTreeTop</span></a></li> </ul> </div> <div class="nav-slide-o"> <ul> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> <li><a href="#"><span>何问起题库</span></a></li> </ul> </div> <div class="nav-slide-o"> <ul> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>网页特效</span></a></li> </ul> </div> <div class="nav-slide-o"></div> </div> </div> </div> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ var thisTime; $(‘.nav-ul li‘).mouseleave(function(even){ thisTime = setTimeout(thisMouseOut,1000); }) $(‘.nav-ul li‘).mouseenter(function(){ clearTimeout(thisTime); var thisUB = $(‘.nav-ul li‘).index($(this)); if($.trim($(‘.nav-slide-o‘).eq(thisUB).html()) != "") { $(‘.nav-slide‘).addClass(‘hover‘); $(‘.nav-slide-o‘).hide(); $(‘.nav-slide-o‘).eq(thisUB).show(); } else{ $(‘.nav-slide‘).removeClass(‘hover‘); } }) function thisMouseOut(){ $(‘.nav-slide‘).removeClass(‘hover‘); } $(‘.nav-slide‘).mouseenter(function(){ clearTimeout(thisTime); $(‘.nav-slide‘).addClass(‘hover‘); }) $(‘.nav-slide‘).mouseleave(function(){ $(‘.nav-slide‘).removeClass(‘hover‘); }) }) </script> </body> </html>
以上是关于JQ动画导航的主要内容，如果未能解决你的问题，请参考以下文章