很常见的一种导航的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. 结对编程1.四则运算GUI版

    201421123022 王若凡        201421123026  欧阳勇 coding详细代码 a.需求分析: 这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linu ...

  2. 团队作业8——第二次项目冲刺（Bata版本）--第二天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 15% 201421123002 翁珊 17% 201421123004 ...

  3. 201521123029《Java程序设计》第1周学习总结

    1. 本周学习总结 1.认识了Java的发展: 2.Java语言的特点,简单性和结构中立: 3.了解到了JDK.JRE,JVM: 4.学习Java数据类型分类,如整形,char型等. 2. 书面作业 ...

  4. ★★★★[转载]Python学习笔记一:数据类型转换★★★★

    一.int函数能够     (1)把符合数学格式的数字型字符串转换成整数     (2)把浮点数转换成整数,但是只是简单的取整,而非四舍五入. 举例: 1 aa = int("124&quo ...

  5. Intellij IDEA WEB结构目录说明【转载】

    https://my.oschina.net/lujianing/blog/186737?p=1#OSC_h2_1

  6. java 利用反射构造泛型类

    1.构造BaseDao泛型类 class BaseDao<T>{ private Class<T> entityClass; // 通过反射获取实际运行的精确类 public ...

  7. 《Java从入门到放弃》JavaSE入门篇：练习——单身狗租赁系统

    今天,我们要玩个大的!!! 我们把之前使用数组做的这个单身狗系统改版成数据库版本,并且使用面向对象里面的一些简单思想.如果有不知道这个系统的看官,请跳转到目录页,然后再选择单身狗系统(数组版)先围观五 ...

  8. Linux SSH 安装Tomcat

    tomcat的安装 1. 下载tomcat 从tomcat官网(http://tomcat.apache.org/download-70.cgi)下载tomcat的压缩包apache-tomcat-7 ...

  9. Java学习笔记四---打包成双击可运行的jar文件

    写笔记四前的脑回路是这样的: 前面的学习笔记二,提到3个环境变量,其中java_home好理解,就是jdk安装路径:classpath指向类文件的搜索路径:path指向可执行程序的搜索路径.这里的类文 ...

  10. FoxOne---一个快速高效的BS框架--生成增删改查

    FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...