この記事では、JavaScript CSS を使用して Mootools の垂直方向の柔軟なアニメーション メニュー効果を模倣する例について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、Mootools の垂直の黒いアニメーション メニューを模倣した JavaScript CSS のデモです。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="" 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 プログラミングに役立つことを願っています。