码迷,mamicode.com
首页 > 其他好文 > 详细

【特效】体验很好的导航hover效果移出恢复当前位置

时间:2016-07-21 16:15:51      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:

很常见的一种导航的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效果移出恢复当前位置

标签:

原文地址:http://www.cnblogs.com/xiaoxianweb/p/5692164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!