我家的导航可以弹琴！

效果预览如下，我在想要是每滑动一个子菜单，就能出一点声音，那就可以自动弹琴了，想想都爽死了.
 

博客园 首页 新随笔 联系 管理 订阅

实现原理还是有点点复杂,产生随机数,随即选择一个滑动,然后循环执行一个函数.
然后给每个添加事件,mouseover的时候就停止,mouseover时候在开始循环执行函数
html代码:

<div id="nothing-menu">   
        <a href="#">博客园</a>
        <a href="#">首页</a>
        <a href="#">新随笔</a>
        <a href="#">联系</a> 
        <a href="#">管理</a> 
        <a href="#">订阅</a> 
 </div>

CSS代码:

 #nothing-menu{position:relative;}
  a{text-decoration:none;}
 #nothing-menu a{display:block;float:left;font-size:14px;padding:10px;color:#999;background-color:#333;}

JS代码:(还是基于mootools1.3)使用了morph动画属性

 var menuDown = {
                data: {
                    locked: false,
                    autoTime: 400,
                    morph: {
                        duration: 200
                    },
                    morphShowDown: {
                        'margin-top': 8,
                        'color': '#ff8',
                        'background-color': '#666'
                    },
                    morphGoBack: {
                        'margin-top': 0,
                        'color': '#999',
                        'background-color': '#333'
                    }
                }, //设置各种需要的参数
                random: function (i) {
                    return parseInt(Math.random() * i);
                },//产生一个随机数
                start: function () {
                    this.menu = $("nothing-menu");
                    this.menuLink = this.menu.getElements("a");  
                    for (var i = 0; i < this.menuLink.length; i++) {
                        this.menuLink[i].set("morph", this.data.morph);
                        this.menuLink[i].addEvents({
                            mouseover: this.showDown.bind(this, [i]),
                            mouseout: this.goBack.bind(this, [i])
                        });
                    }
                    this.rotate.periodical(this.data.autoTime, this);   //每隔一段时间执行
                },
                rotate: function () {
                    if (!this.data.locked) {  //当处于锁定状态时，不发生任何事情，自然会停止
                        this.randomShow(); 
                    }
                },
                stop: function () {
                    this.data.locked = true;  
                },
                randomShow: function () {
                    var i = this.random(this.menuLink.length);
                    this.menuLink[i].get("morph").start(this.data.morphShowDown).chain(function () {
                        this.menuLink[i].get("morph").start(this.data.morphGoBack);
                    } .bind(this, i));  //函数链
                },
                showDown: function (i) {     //下滑函数
                    this.data.locked = true;
                    this.menuLink[i].morph(this.data.morphShowDown);
                },
                goBack: function (i) {      //返回函数
                    this.data.locked = false;
                    this.menuLink[i].morph(this.data.morphGoBack);
                }
            };
            menuDown.start();

此效果纯属好玩，不过我在想要是真的可以随机弹钢琴就好了，就是产生1-7的随机数，然后每次就弹出相应的声音,要是难点的话可以加个
中低高音，突然发现自己好会想！嘿嘿！更神奇点的就是支持键盘1-7甚至更多的键的输入就好了，然后就可以真的弹琴了！原来在键盘上
也是可以的！