首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现鼠标悬停3d菜单展开动画效果

Posted in Javascript onJanuary 19, 2017

竖直的主菜单贴着页面左侧，当光标移入菜单项时，以3D动画的方式弹出对应的二级菜单。

采用jQuery和CSS3实现。支持Chrome，火狐，Edge等浏览器。

效果图：

jQuery实现鼠标悬停3d菜单展开动画效果

代码如下：

<!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鼠标悬停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="wrap">
 <div class="logo">
  <h1><a href="javascript:;" target="_self"><img src="http://hovertree.com/themes/hvtimages/hovertree.png"></a></h1>
 </div>
 <p>鼠标移入侧边栏，二级菜单3D展开<br/>鼠标hover背景变色<br />鼠标移入二维码背景变色</p>
 <div style="text-align:center;margin:50px 0; font-size:20px; color:#ffffff;" >
  <a href="http://hovertree.com/">何问起</a>
  <a href="http://hovertree.com/h/bjag/clwkm5fc.htm" >说明</a>
 </div>
</div>
<div class="nav-main">
<div class="nav-box">
<div class="nav">
 <ul class="nav-ul">
  <li><a href="http://hovertree.com" class="home"><span>首页</span></a></li>
  <li><a href="http://hovertree.com/h/bjaf/lxsexx3m.htm" class="develop"><span>JavaScript</span></a></li>
  <li><a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm" class="wechat"><span>ASP.NET</span></a></li>
  <li><a href="http://hovertree.com/h/bjag/hxti6to6.htm" class="case"><span>何问起键盘</span></a></li>
  <li><a href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="news"><span>HoverClock</span></a></li>
  <li><a href="http://hovertree.com/about/" 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="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
   <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li>
  </ul>
 </div>
 <div class="nav-slide-o">
  <ul>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
   <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li>
  </ul>
 </div>
 <div class="nav-slide-o">
  <ul>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
   <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li>
  </ul>
 </div>
 <div class="nav-slide-o">
  <ul>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li>
   <li><a href="http://hovertree.com/menu/texiao/"><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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jQuery实现鼠标悬停3d菜单展开动画效果

- Author -

roucheng

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
vue项目中使用多选框的实例代码
Jul 22 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 #Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 #Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 #Javascript
bootstrap组件之导航组件使用方法
Jan 19 #Javascript
bootstrap输入框组件使用方法详解
Jan 19 #Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 #Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 #Javascript
localStorage(1) Postman(1) virtualenv(1) 加载异常(1) 共享文件夹(1) NginxConfig(1) 骨架屏(1) SVN(1) DeOldify(1) 横向滚动(1)
You might like
php 中英文语言转换类代码
2011/08/11 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP加密技术的简单实现
2016/09/04 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
python基础教程之常用运算符
2014/08/29 Python
Python实现k-means算法
2018/02/23 Python
anaconda如何查看并管理python环境
2019/07/05 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
Python图片处理模块PIL操作方法（pillow）
2020/04/07 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
c++工程师面试问题
2013/08/04 面试题
优良学风班总结材料
2014/02/08 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
小学运动会开幕词
2016/03/04 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL