jQuery 點擊展開180度菜單
- <ul id="nav">
- <li><a href="javascript:goTo('camera');"><i class="icon-camera"></i></a></li>
- <li><a href="javascript:goTo('user');"><i class="icon-user"></i></a></li>
- <li><a href="javascript:goTo('music');"><i class="icon-music"></i></a></li>
- <li><a href="javascript:goTo('commentalt');"><i class="icon-comment-alt"></i></a></li>
- <li><a href="javascript:goTo('moon');"><i class="icon-moon"></i></a></li>
- </ul>
- <section id="content">
- <article id="camera" class="active"> <i class="icon-camera"></i>
- <h1>導航菜單</h1>
- <div class="cnt"><a href="http://freejs.net/daohangcaidan.html">各種下拉菜單,導航,多級菜單,右側展開,左側展開</a></div>
- </article>
- <article id="user" class="off"> <i class="icon-user"></i>
- <h1>TAB標籤</h1>
- <div class="cnt"> <a href="http://freejs.net/tabbiaoqian.html">tab標籤,選項卡,選卡,jquery選項卡,標籤頁,動態加載tab</a></div>
- </article>
- <article id="music" class="off"> <i class="icon-music"></i>
- <h1>焦點圖</h1>
- <div class="cnt"> <a href="http://freejs.net/jiaodiantu.html">焦點圖,相冊,幻燈片,輪播圖</a></div>
- </article>
- <article id="moon" class="off"> <i class="icon-moon"></i>
- <h1>分頁</h1>
- <div class="cnt"> <a href="http://freejs.net/fenye.html">翻頁,分頁,無刷新翻頁,jquery翻頁 本站演示中的分頁數據庫結構都一樣的</a></div>
- </article>
- </section>
- <script type="text/javascript">
- var currentIndex = 0;
- var currentId = "camera";
- $(document).ready(function() {
- $("#nav").ferroMenu({
- position : "left-center",
- delay : 50,
- rotation : 720,
- margin : 20
- });
- });
- var colors = {
- "camera" : {
- "background" : "#D06503",
- "index" : 0
- },
- "user" : {
- "background" : "#E9931A",
- "index" : 1
- },
- "mapmarker" : {
- "background" : "#1691BE",
- "index" : 2
- },
- "music" : {
- "background" : "#166BA2",
- "index" : 3
- },
- "commentalt" : {
- "background" : "#1B3647",
- "index" : 4
- },
- "moon" : {
- "background" : "#152836",
- "index" : 5
- }
- };
- function goTo(id){
- var obj = eval("colors."+id);
- $("body").css("background",obj.background);
- $("#ferromenu-controller,#nav li a").css("color",obj.background);
- if(obj.index > currentIndex){
- $(".active").addClass("off");
- $(".active").transition({
- x : -100,
- opacity : 0,
- zIndex : 0
- },600);
- $("#"+currentId).removeClass("active");
- $("#"+id).addClass("active");
- $("#"+id).transition({
- x : 400
- },0,function(){
- $("#"+id).removeClass("off");
- $("#"+id).transition({
- x : 0,
- opacity : 1,
- zIndex : 2
- },600);
- });
- }else if(obj.index < currentIndex){
- $(".active").addClass("off");
- $(".active").transition({
- x : 100,
- opacity : 0,
- zIndex : 0
- },600);
- $("#"+currentId).removeClass("active");
- $("#"+id).addClass("active");
- $("#"+id).transition({
- x : -400
- },0,function(){
- $("#"+id).removeClass("off");
- $("#"+id).transition({
- x : 0,
- opacity : 1,
- zIndex : 2
- },600);
- });
- }
- currentIndex = obj.index;
- currentId = id;
- }
- </script>
原文地址:http://www.freejs.net/article_daohangcaidan_161.html