很常见的一种导航的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. mysql 5.7 Warning: Using a password on the command line interface can be insecure. 解决方案

    百度了好多,发现都是lunix环境下的,没有找到windows和OS 的,在lunix环境下的解决方案一般就是修改数据库配置文件 my.conf 在Windows 中是没有my.cnf 文件,而是叫做 ...

  2. 九度OJ 1017 还是畅通工程

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  3. 201521123066 《Java程序设计》 第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.clone方法 1.1 Object对象中的clone ...

  4. 201521123075 《Java程序设计》第1周学习总结

    1. 本周学习总结 (1)Java不仅是程序语言,还是一种标准规范,代表着解决问题的方案.Java是一个面向对象的编程语言,熟悉后相对于c++更方便,其一大特色就是能够跨平台运行. (2)Java发展 ...

  5. Python[小甲鱼008了不起的分支和循环2]

    案例:对所给的分数进行评级,以下有三种方案: score = int(input('请输入一份分数')) #第一种方案 if 100 >= score >= 90: print('A') ...

  6. 201521123116 《java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jm ...

  7. Java SVN管理工具的使用

    1.svn环境搭建 在应用myEclips 8.5做项目时,svn会成为团队项目的一个非常好的工具,苦苦在网上寻求了一下午,终于整合好了这个环境,在这里简单介绍下,希望能为刚开始用svn的朋友一点点帮 ...

  8. python之路模块与包

    一.import加载的模块分为四个通用类别:          1 使用python编写的代码(.py文件) 2 已被编译为共享库或DLL的C或C++扩展 3 包好一组模块的包 4 使用C编写并链接到 ...

  9. MySQL线程池的引入可以提高我们的MySQL的性能

    支持线程池的版本:MySQL 企业版本,MySQL percona的分支 MariDB 的版本.我们知道我们的MySQL 语句是不支持硬解析的,没有无SQL 解析 cache.每个连接对应一个线程,我 ...

  10. oracle安装时，条件检查不通过解决办法

    1.开始菜单→ 运行:输入regedit,打开注册表 2.依次点开HKEY_LOCAL_MACHINE>>SYSTEM>>CurrenControlSet>>ser ...