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 相关文章推荐
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
了解重排与重绘
May 29 Javascript
JS轮播图的实现方法2
Aug 25 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
You might like
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
python中的测试框架
2020/11/13 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
大学毕业感言100字
2014/02/03 职场文书
应聘英语教师求职信
2014/04/24 职场文书
法人委托书范本格式
2014/09/15 职场文书
公司安全管理制度范本
2015/08/05 职场文书
《静夜思》教学反思
2016/02/17 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers