本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果。分享给大家供大家参考。具体如下：
这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单，并非使用了Mootools，但效果却和使用了Mootools差不多，动画效果平滑，操作舒服，给菜单增色不少。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-mootools-style-demo/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>竖排黑色动画菜单</title> <style type="text/css"> #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> <div id="menu"> <ul> <li><a href="#" title="">JQuery插件</a></li> <li><a href="#">Ext 皮肤</a></li> <li><a href="#">CSS特效</a></li> <li><a href="#">Ajax技巧集</a></li> </ul> </div> <script type="text/javascript"> 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程序设计有所帮助。
【JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果】相关文章：
★ Javascript实现的SHA-256加密算法完整实例
★ Javascript实现div的toggle效果实例分析