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

2019-11-20 11:28:12

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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="" class="toggler">JQuery插件</a></li>  <li><a href="#" class="toggler">Ext 皮肤</a></li>  <li><a href="#" class="toggler">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程序设计有所帮助。

上一篇：JS更改select内option属性的方法

下一篇：JS实现的最简Table选项卡效果