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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
js+canvas绘制图形验证码
Sep 21 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
js实现简单点赞操作
2020/03/17 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
python删除文件示例分享
2014/01/28 Python
Python中的下划线详解
2015/06/24 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python实现微信好友的数据分析
2019/12/16 Python
Django app配置多个数据库代码实例
2019/12/17 Python
简单介绍django提供的加密算法
2019/12/18 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python如何省略括号方法详解
2020/03/21 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
书法比赛获奖感言
2014/02/10 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
苏州园林导游词
2015/02/03 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers