我们来介绍一个效果很棒的导航实例，点击某个会有类似钢琴的弹动的效果。实现原理还是有点点复杂,产生随机数,随即选择一个滑动,然后循环执行一个函数.
然后给每个添加事件,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>
#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;}
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();
