很常见的一种导航的hover效果，鼠标放上后除了正常的hover，在移出整个导航后，会恢复当前栏目的特殊样式，分别有横向和纵向的导航。代码也比较简单，设置一个当前栏目的class，用index()找到当前的位置，再用animate把hover效果的“滑动块”移动到相应位置。这里需注意animate中queue:false这一句必不可少，其作用是让这个animate不进入默认的动画队列中，这样在鼠标移动过程中，不会产生频频跳动的感觉。

说的比较啰嗦，具体看代码好了。

效果预览：

横向导航：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2769.htm

纵向导航：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2770.htm

源码下载：http://pan.baidu.com/s/1i4eHzhV

【特效】体验很好的导航hover效果移出恢复当前位置的更多相关文章

  1. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  2. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  3. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  4. Web 开发中很实用的10个效果

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  5. 转：Web 开发中很实用的10个效果【附源码下载】

    原文地址:http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html 在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多 ...

  6. Web页面中5种超酷的Hover效果

    hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...

  7. jQuery 特效：盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  8. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  9. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

随机推荐

  1. Java 多线程（三） 线程的生命周期及优先级

    线程的生命周期 线程的生命周期:一个线程从创建到消亡的过程. 如下图,表示线程生命周期中的各个状态: 线程的生命周期可以分为四个状态: 1.创建状态: 当用new操作符创建一个新的线程对象时,该线程处 ...

  2. 团队作业9--beta版本测试报告及发布说明

    Beta版本测试报告 1.bug的分类 a.修复的bug 部分用户无法获取位置 e. 这个bug的确应该修复,但是没有时间在这个版本修复,延迟到下一个版本修复. 前端无法查看用户签到信息 2.场景测试 ...

  3. list后台转化为JSON的方法ajax

    导入alibaba的fastJson包 后台: protected void doGet(HttpServletRequest request, HttpServletResponse respons ...

  4. 201521123045 《Java程序设计》第8周学习总结

    第08周-集合与泛型 1. 本周学习总结 2. 书面作业 1.List中指定元素的删除(题目4-1)1.1 实验总结 答: Scanner实现字符串的输入有两种方法,一种是next(),一种nextL ...

  5. 201521123074 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  6. 控制结构(7) 程序计数器(PC)

    // 上一篇:最近最少使用(LRU) // 下一篇:线性化(linearization) 程序的每一行都是一个状态,对应的行指令.同步的情况下同一个pc一直自增,异步的时候,分裂出一个新的子pc,独立 ...

  7. java课程设计-猜数游戏

    1. 团队名称.团队成员介绍 团队名称:breeze 团队成员 组长:网络1514张朝玮 201521123106 组员:网络1513侯帅军 201521123092 2. 项目git地址 https ...

  8. JAVA课程设计--------五子棋

    1.团队课程设计博客链接 http://www.cnblogs.com/mz201521044152/p/7065575.html 2.个人负责模块或任务说明 1.重新开始:写一个restartgam ...

  9. 使用electron将应用程序加入到系统托盘

    博主电脑

  10. Eclipse: eclipse文本文件编码格式更改（GBK——UTF-8）

    Eclipse中设置编码的方式 Eclipse工 作空间(workspace)的缺省字符编码是操作系统缺省的编码,简体中文操作系统 (Windows XP.Windows 2000简体中文)的缺省编码 ...