大佬教程收集整理的这篇文章主要介绍了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了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="" 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,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,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,ttl) } } ); </script> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
以上是大佬教程为你收集整理的JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果全部内容,希望文章能够帮你解决JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。