本文实例讲述了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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题竖排黑色动画菜单/title style type=' text/CSS ' # menu { height : auto；宽度： 350像素；向左浮动：}车身{ overflow: auto背景技术： # 333;颜色： # FFF；Helvetica阿里亚尔，邮编： 12px无衬线字体；} #菜单li { display:块列表样式类型：无；} #菜单a { font-size : 11px颜色： # FFF；填充-右： 10px左填充： 10px线高： 30px文本装饰：无；背景： # 000 URL(图片/BG。jpg)无重复左；高度： 30px宽度： 180像素；显示器：块；大纲：0边距-底部： 5px} #菜单a : hover { color : # ccff 00 background : # 000 URL(images/bg1。jpg)无重复左；}/style/head body div id=' menu ' ul lia href=' # ' title=' class=' toggler ' jquery插件/a/Li lia皮肤/a/Li lia href=' # ' class=' toggler ' CSS特效/a/li lia href='#'Ajax技巧集/a/Li/ul/div脚本类型=' text/JAVAScript ' var $=function(_ SiD){返回类型为_ SiD==' string '？文件。getelementbyid(_ SiD): _ SiD；}var每个=函数(a，fn){ for(var I=0；ia。长度；i )fn.call(a[i]，I，a)}；var Tweener={画外音：函数(t，b，c，d){返回c * t/d b；}，画外音：函数(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；} }};每个($("菜单")。getElementsByTagName('a ')，function(){ this。onmouseover=function(){ var b=parsent(this。风格。左边距)；b=isNaN(b)？0 : b；var t=0，c=30-b，d=10，TTL=10 var me=this clearinterval(me。仅)；我。only=set interval(function(){ me。风格。左边距=tweener。画外音(t，b，c，d)' px '；中频(TD)测试；else { clearInterval(我。仅)；} }，TTL)}这个。onmouseout=function(){ var b=parsent(this。风格。左边距)；b=isNaN(b)？0 : b；var t=0，c=0-b，d=50，TTL=10 var me=this clearinterval(me。仅)；我。only=set interval(function(){ me。风格。左边距=tweener。地役权(t，b，c，d)' px '；中频(TD)测试；else { clearInterval(我。仅)；} }，TTL)} })；/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。