JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

更新时间：2026-05-11 01:09:47作者：yezheng

本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果。分享给大家供大家参考。具体如下：

这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单，并非使用了Mootools，但效果却和使用了Mootools差不多，动画效果平滑，操作舒服，给菜单增色不少。

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>竖排黑色动画菜单</title>

#menu {

height: auto;

width: 350px;

float: left;

}

body {

overflow: auto;

background: #333;

color: #FFF;

font: 12px Arial, Helvetica, sans-serif;

}

#menu li {

display: block;

list-style-type: none;

}

#menu a {

font-size: 11px;

color: #FFF;

padding-right: 10px;

padding-left: 10px;

line-height: 30px;

text-decoration: none;

background: #000 url(images/bg.jpg) no-repeat left;

height: 30px;

width: 180px;

display: block;

outline:0;

margin-bottom: 5px;

}

#menu a:hover {

color: #CCFF00;

background: #000 url(images/bg1.jpg) no-repeat left;

}

</style>

</head>

<body>

<ul>

<li><a href="#" title="" class="toggler">JQuery插件</a></li>

<li><a href="#" class="toggler">CSS特效</a></li>

<li><a href="#">Ajax技巧集</a></li>

</ul>

</div>

var $ = function(_sId){return typeof _sId == 'string' ? document.getElementById(_sId) : _sId;}

var Each=function (a,fn){for(var i=0;i<a.length;i++)fn.call(a[i],i,a)};

var Tweener = {

easeNone: function(t, b, c, d) {

return c*t/d + b;

easeOutBounce: function(t, b, c, d) {

if((t/=d) <(1/2.75)) {

return c*(7.5625*t*t) + b;

} else if(t <(2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

} else if(t <(2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

} else {

return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

}

};

Each($('menu').getElementsByTagName('a'), function(){

this.onmouseover = function(){

var b = parseInt(this.style.marginLeft);

b = isNaN(b) ? 0 : b;

var t=0,c=30-b,d =10,ttl=10;

var me = this;

clearInterval(me.only);

me.only=setInterval(function (){

me.style.marginLeft = Tweener.easeNone(t,b,c,d)+'px';

if(t<d) t++;

else{

clearInterval(me.only);

}

},ttl)

}

this.onmouseout = function(){

var b = parseInt(this.style.marginLeft);

b = isNaN(b) ? 0 : b;

var t=0,c=0-b,d =50,ttl=10;

var me = this;

clearInterval(me.only);

me.only=setInterval(function (){

me.style.marginLeft = Tweener.easeOutBounce(t,b,c,d)+'px';

if(t<d) t++;

else{

clearInterval(me.only);

}

},ttl)

}

);

</script>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。