首页
所有分类
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 相关文章推荐
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
JS面向对象编程基础篇（三） 继承操作实例详解
Mar 03 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
js实现抽奖功能
Nov 24 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
Lifecycle(1) 微信(2) tensorflow(2) ResNet50(1) 温控(1) Xception(1) PostMapping(1) Spring(9) 内存泄露(1) Seaborn(1)
You might like
杏林同学录(九)
2006/10/09 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
解析PHP提交后跳转
2013/06/23 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
Position属性之relative用法
2015/12/14 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
微信小程序自定义弹窗实现详解(可通用）
2019/07/04 Javascript
js实现微信聊天界面
2020/08/09 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
python3生成随机数实例
2014/10/20 Python
python任务调度实例分析
2015/05/19 Python
python解析基于xml格式的日志文件
2017/02/25 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python3判断IP地址的方法
2021/03/04 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
学生档案自我鉴定
2013/10/07 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书