jQuery實現(xiàn)鼠標(biāo)懸停3d菜單展開動畫效果

更新時間：2017年01月19日 14:03:16 作者：roucheng

本文主要介紹了jQuery鼠標(biāo)懸停3d菜單展開動畫效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧

豎直的主菜單貼著頁面左側(cè)，當(dāng)光標(biāo)移入菜單項時，以3D動畫的方式彈出對應(yīng)的二級菜單。

采用jQuery和CSS3實現(xiàn)。支持Chrome，火狐，Edge等瀏覽器。

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery鼠標(biāo)懸停3d菜單展開動畫 - 何問起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" >
</head>
<body>
<div class="wrap">
 <div class="logo">
  <h1><a href="javascript:;" target="_self"><img src="http://hovertree.com/themes/hvtimages/hovertree.png"></a></h1>
 </div>
 <p>鼠標(biāo)移入側(cè)邊欄，二級菜單3D展開<br/>鼠標(biāo)hover背景變色<br />鼠標(biāo)移入二維碼背景變色</p>
 <div style="text-align:center;margin:50px 0; font-size:20px; color:#ffffff;" >
  <a >何問起</a>
  <a  >說明</a>
 </div>
</div>
<div class="nav-main">
<div class="nav-box">
<div class="nav">
 <ul class="nav-ul">
  <li><a  class="home"><span>首頁</span></a></li>
  <li><a  class="develop"><span>JavaScript</span></a></li>
  <li><a  class="wechat"><span>ASP.NET</span></a></li>
  <li><a  class="case"><span>何問起鍵盤</span></a></li>
  <li><a  class="news"><span>HoverClock</span></a></li>
  <li><a  class="contact"><span>關(guān)于何問起</span></a></li>
 </ul>
</div>
<div class="nav-slide">
 <div class="nav-slide-o"></div>
 <div class="nav-slide-o">
  <ul>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
   <li><a ><span>hewenqi</span></a></li>
  </ul>
 </div>
 <div class="nav-slide-o">
  <ul>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
   <li><a ><span>HoverTreeTop</span></a></li>
  </ul>
 </div>
 <div class="nav-slide-o">
  <ul>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
   <li><a ><span>何問起題庫</span></a></li>
  </ul>
 </div>
 <div class="nav-slide-o">
  <ul>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</span></a></li>
   <li><a ><span>網(wǎng)頁特效</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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: