本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
