很常见的一种导航的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. 团队作业5——测试与发布（Alpha版本）

    Deadline: 2017-5-7 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的两个方面 测试报告 发布说明 晚交 - 0分 迟交一周以上 - 倒扣本次作业 ...

  2. 作业2——需求分析&原型设计

    需求分析: 软件的最终目的是用来解决用户的某些问题,需求分析就是要理解要解决的问题,真正明确用户需求.下面是我们初步的需求分析: 1.访问软件项目的真实用户(至少10个),确保软件真正体现用户的需求, ...

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

    1. 本周学习总结 2.书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  4. 201521123114 《Java程序设计》第2周学习总结

    #1. 本周学习总结 1. 学会了使用码云管理代码,使用eclipse关联jdk源代码: 2. 学习了包管理机制,包的作用:主要是管理java文件,解决同名文件冲突; 3. ArrayList可以处理 ...

  5. 201521123022 《Java程序设计》 第十一周学习总结

    1.本章学习总结 2.书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问 Q1.1 除了使用synchronized修饰方法实现互斥同步访问,还 ...

  6. eclipse里index.jsp头部报错的原因和解决方法

    index.jsp的头<%@这句报错的话,是因为没有引入Tomcat的原因.解决:A:Window---Preferences---server---RuntimeEnviroments--Ad ...

  7. JSP知识点大纲图

    这是我整理出来的JSP知识点大纲图,具体的内容都可以在我的博文中找到-.

  8. Spring4 customEditors

    Spring4.0版本以后customEditors属性为Map<Class<?>, Class<? extends PropertyEditor>>,所以用key ...

  9. c# 第一节课 一些简单的应用

    注册要钱 我没钱

  10. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...