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>

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

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
You might like
PHP 身份证号验证函数
2009/05/07 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
JS继承 笔记
2011/07/13 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
解析Python编程中的包结构
2015/10/25 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
详解django三种文件下载方式
2018/04/06 Python
python 中字典嵌套列表的方法
2018/07/03 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python反转列表的三种方式解析
2019/11/08 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
创业资金计划书
2014/02/06 职场文书
项目合作协议书
2014/04/16 职场文书