Home >Web Front-end >JS Tutorial >JavaScript CSS implements Mootools-like vertical flexible animated menu effect_javascript skills

JavaScript CSS implements Mootools-like vertical flexible animated menu effect_javascript skills

WBOYOriginal: 2016-05-16 15:36:431244browse

This article describes the example of using JavaScript CSS to imitate the Mootools vertical flexible animated menu effect. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of JavaScript CSS imitating Mootools vertical black animated menu. It does not use Mootools, but the effect is similar to using Mootools. The animation effect is smooth, the operation is comfortable, and it adds a lot of color to the menu.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-mootools-style-demo/

The specific code is as follows:

<!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' &#63; 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) &#63; 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) &#63; 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>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS CSS realizes Yahoo-like alternative sliding door switching effect_javascript skillsNext article：JS CSS realizes Yahoo-like alternative sliding door switching effect_javascript skills

See more

JavaScript CSS implements Mootools-like vertical flexible animated menu effect_javascript skills

Related articles