6种jQuery导航栏滑动动画效果

6种jQuery导航栏滑动动画效果

6种简单好看的jQuery导航栏滑动动画效果，分别有左右滚动、从上向下滚动、从下向上滚动、从左边缘向右边缘滚动、从右边缘向左边缘滚动、从中间变大至填满6种动画效果。

1. js代码
   
2. 
   
3. <script type="text/javascript" src="js/jquery-nav.js"></script>
   
4. <script type="text/javascript">
   
5. $('#f-nav').tooltip({
   
6. default: 2,       // 默认为空  --  选中默认值
   
7. width: '200',     // 限制宽度
   
8. height: '100',
   
9. textList: ['首页','分页1','分页2','分页3'],   // 每个导航的内容
   
10. type: 'slideMove',  // 必填, 选择内容
    
11. success: function(ret){
    
12. 
    
13. }   //初始化回调
    
14. });
    
15. $('#f-nav2').tooltip({
    
16. default: 3,   
    
17. type: 'fontUp',
    
18. width: '150',
    
19. });
    
20. $('#f-nav3').tooltip({
    
21. type: 'downUp'
    
22. });
    
23. $('#f-nav4').tooltip({
    
24. type: 'edgeLeft'
    
25. });
    
26. $('#f-nav5').tooltip({
    
27. type: 'edgeRight'
    
28. });
    
29. $('#f-nav6').tooltip({
    
30. type: 'scaleChange'
    
31. });
    
32. </script>

复制代码

自适应左侧手风琴下拉菜单js代码.zip (12.77 KB, 下载次数: 556)

2021-2-22 17:50 上传

点击文件名下载附件
6种jQuery导航栏滑动动画效果