首页>>导航菜单>>jQuery 点击展开180度菜单(2013-12-09)

jQuery 点击展开180度菜单

jQuery 点击展开180度菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul id="nav">  
  2. <li><a href="javascript:goTo('camera');"><i class="icon-camera"></i></a></li>  
  3. <li><a href="javascript:goTo('user');"><i class="icon-user"></i></a></li>  
  4. <li><a href="javascript:goTo('music');"><i class="icon-music"></i></a></li>  
  5. <li><a href="javascript:goTo('commentalt');"><i class="icon-comment-alt"></i></a></li>  
  6. <li><a href="javascript:goTo('moon');"><i class="icon-moon"></i></a></li>  
  7. </ul>  
  8. <section id="content">  
  9. <article id="camera" class="active"> <i class="icon-camera"></i>  
  10. <h1>导航菜单</h1>  
  11. <div class="cnt"><a href="http://freejs.net/daohangcaidan.html">各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</a></div>  
  12. </article>  
  13. <article id="user" class="off"> <i class="icon-user"></i>  
  14. <h1>TAB标签</h1>  
  15. <div class="cnt"> <a href="http://freejs.net/tabbiaoqian.html">tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab</a></div>  
  16. </article>  
  17. <article id="music" class="off"> <i class="icon-music"></i>  
  18. <h1>焦点图</h1>  
  19. <div class="cnt"> <a href="http://freejs.net/jiaodiantu.html">焦点图,相册,幻灯片,轮播图</a></div>  
  20. </article>  
  21. <article id="moon" class="off"> <i class="icon-moon"></i>  
  22. <h1>分页</h1>  
  23. <div class="cnt"> <a href="http://freejs.net/fenye.html">翻页,分页，无刷新翻页,jquery翻页 本站演示中的分页数据库结构都一样的</a></div>  
  24. </article>  
  25. </section>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             var currentIndex = 0;  
  3.             var currentId = "camera";  
  4.             $(document).ready(function() {  
  5.                 $("#nav").ferroMenu({  
  6.                     position    : "left-center",  
  7.                     delay       : 50,  
  8.                     rotation    : 720,  
  9.                     margin      : 20  
  10.                 });  
  11.             });  
  12.               
  13.             var colors = {  
  14.                     "camera" : {  
  15.                         "background" : "#D06503",  
  16.                         "index" : 0  
  17.                     },  
  18.                     "user" : {  
  19.                         "background" : "#E9931A",  
  20.                         "index" : 1  
  21.                     },  
  22.                     "mapmarker" : {  
  23.                         "background" : "#1691BE",  
  24.                         "index" : 2  
  25.                     },  
  26.                     "music" : {  
  27.                         "background" : "#166BA2",  
  28.                         "index" : 3  
  29.                     },  
  30.                     "commentalt" : {  
  31.                         "background" : "#1B3647",  
  32.                         "index" : 4  
  33.                     },  
  34.                     "moon" : {  
  35.                         "background" : "#152836",  
  36.                         "index" : 5  
  37.                     }  
  38.                       
  39.             };  
  40.               
  41.             function goTo(id){  
  42.                 var obj = eval("colors."+id);  
  43.                   
  44.                 $("body").css("background",obj.background);  
  45.                 $("#ferromenu-controller,#nav li a").css("color",obj.background);  
  46.                 if(obj.index > currentIndex){  
  47.                     $(".active").addClass("off");  
  48.                     $(".active").transition({  
  49.                         x : -100,  
  50.                         opacity : 0,  
  51.                         zIndex : 0  
  52.                     },600);  
  53.                       
  54.                     $("#"+currentId).removeClass("active");  
  55.                       
  56.                     $("#"+id).addClass("active");  
  57.                     $("#"+id).transition({  
  58.                         x : 400  
  59.                     },0,function(){  
  60.                         $("#"+id).removeClass("off");  
  61.                         $("#"+id).transition({  
  62.                             x : 0,  
  63.                             opacity : 1,  
  64.                             zIndex : 2  
  65.                         },600);  
  66.                     });  
  67.                 }else if(obj.index < currentIndex){  
  68.                     $(".active").addClass("off");  
  69.                     $(".active").transition({  
  70.                         x : 100,  
  71.                         opacity : 0,  
  72.                         zIndex : 0  
  73.                     },600);  
  74.                     $("#"+currentId).removeClass("active");  
  75.                       
  76.                       
  77.                     $("#"+id).addClass("active");  
  78.                     $("#"+id).transition({  
  79.                         x : -400  
  80.                     },0,function(){  
  81.                         $("#"+id).removeClass("off");  
  82.                         $("#"+id).transition({  
  83.                             x : 0,  
  84.                             opacity : 1,  
  85.                             zIndex : 2  
  86.                         },600);  
  87.                     });  
  88.                 }  
  89.                 currentIndex = obj.index;  
  90.                 currentId = id;  
  91.                   
  92.             }  
  93.         </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_161.html