jQuery弹性滑动导航菜单实现思路及代码

复制代码代码如下：-本文参照了该作者的思路：http://runjs.cn/code/ouvvjqka，jquery代码系另外编写- !-本文出自：http://博客。csdn。net/李延芝08-！-实现思路：CSS:用一个绝对定位的差异作为动画滑块，改变它的左边的属性来呈现动画效果javascript:悬停()触发移动鼠标到导航航行的动作，和移出导航航行的动作（即返回到目前的导航) - !DOCTYPE HTML HTML头元字符集=' UTF-8 '/元名='作者内容='Nancle'/titlejQuery弹性滑动导航菜单/title style type=' text/CSS ' body { font-family : ' Microsoft YaHei '；} # nav _ wrapper {位置：相对；宽度宽度：835pxmargin:80px汽车；边框-底部：2px #ddd实心；} # nav _ wrapper # nav _ menu { height :50 px；} # nav _ wrapper # nav _ menu a {显示：块；float:left高度：50 pxpadding:0 40px线高：50 pxcolor : # 666 font-size :16 px；文本装饰：无；} # nav _ wrapper # nav _ animate _ block {位置：绝对值；底部：-2px；高度：2px飞越：隐藏；背景技术# 80b600}/style脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌api。com/Ajax/libs/jquery/1。9 .1/jquery。量滴js '/script script type=' text/JavaScript ' $(function(){ var $ current _ nav=$(' # current _ nav ')；//当前元素（当前所在导航项)var current _ nav _ width=$ current _ nav。inner width()；var current _ nav _ left=$ current _ nav。位置().向左；var $ nav _ animate _ block=$(' # nav _ animate _ block ')；//动画滑块$ nav _ animate _ block。CSS({宽度： current _ nav _ width，左： current _ nav _ left })；//初始状态下，动画滑块位置在目前的元素//鼠标进入a元素时触发动画事件$(“# nav _ menu a”).悬停(函数(){ var index=$(this)).index()；var $a_cur=$('#nav_menu ').查找(' a ').eq(指数);//鼠标移动到的a元素//利用触发的a元素索引获取其左边的位置和它的宽度var width=$ a _ cur。inner width()；var left=$a_cur.position().向左；//设置动画滑块位置$nav_animate_block.stop().动画({ width: width，left: left }，300) }，函数(){ //鼠标离开a元素时，动画滑块返回目前的元素位置$nav_animate_block.stop().动画({ width: current_nav_width，left : current _ nav _ left })})})；/script/head body div id=' nav _ wrapper ' div id=' nav _ menu ' a href=' # ' id=' current _ nav '首页/a a href='# '产品列表/a a href='# '客户案例/a a href='# '服务平台/a a href='# '交流论坛/a a href='# '关于我们/a/div div id=' nav _ animate _ block '/div/div/body/html