最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现鼠标悬停3d菜单展开动画效果的教程
时间：2017-02-08 编辑：简简单单 来源：一聚教程网
竖直的主菜单贴着页面左侧，当光标移入菜单项时，以3D动画的方式弹出对应的二级菜单。
采用jQuery和CSS3实现。支持Chrome，火狐，Edge等浏览器。
效果图：
代码如下：
| 代码如下 | 复制代码 |
鼠标移入侧边栏，二级菜单3D展开
$(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'); }) }) | |
相关文章
- 基于jQuery代码实现圆形菜单展开收缩效果 04-01
- Jquery树插件zTree实现菜单树 03-06
- jQuery实现的省市联动菜单功能示例，亲测可用 02-04
- jQuery Collapse轻量级的手风琴菜单插件 06-14
- jQuery响应菜单插件PgwMenu使用例子 03-29
- jQuery实现的折叠菜单效果代码 09-24