jquery动态导航插件dynamicNav用法实例分析_jquery

本文实例讲述了jquery动态导航插件dynamicNav用法。分享给大家供大家参考。具体如下：

这是一款自己写的jquery动态导航插件—dynamicNav，具体思路是：

第一、给所有的li里插入一个span标签，且包含li里面的a标签
第二、复制一份a标签，插入到span里，现在span里有两个a标签
第三、根据传入的参数判断是垂直切换还是水平的，如果是垂直的，将span的宽度改为一个a标签的宽度，这时两个a标签就垂直排列了，这里一定要将li的overflow:hidden;否则会看到2个a标签。如果是水平的，将span的宽度改为2个a标签的宽度，且将li的宽度改为一个a标签的宽度，因为我没有在css中设置li的宽度，它是随a标签的宽度而改变，如果你像将所有导航菜单的宽度设为一样宽，可以在css中给li加上width属性。
第四、就是开始制作动画效果，使用hover事件，处理鼠标经过和离开时的效果。

使用jquery的animate改变span的margin-top（垂直方向）和margin-left(水平方向)就可以了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-tab-cha-plug-dynamicNav-codes/

具体代码如下：

向左（速度300毫秒）

向右（速度200毫秒）

向上（速度100毫秒）

向下（速度400毫秒）

希望本文所述对大家的jquery程序设计有所帮助。