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


Posted in Javascript onOctober 14, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
JS实现的最简Table选项卡效果
Oct 14 #Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 #Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 #Javascript
smartcrop.js智能图片裁剪库
Oct 14 #Javascript
深入学习JavaScript对象
Oct 13 #Javascript
快速学习JavaScript的6个思维技巧
Oct 13 #Javascript
有关json_decode乱码及NULL的问题
Oct 13 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python文件的md5加密方法
2016/04/06 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python django model联合主键的例子
2019/08/06 Python
Python sep参数使用方法详解
2020/02/12 Python
Python数据正态性检验实现过程
2020/04/18 Python
Django中FilePathField字段的用法
2020/05/21 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
文秘专业自荐信
2013/10/14 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2016党校培训心得体会
2016/01/07 职场文书
党章学习心得体会2016
2016/01/14 职场文书
工作计划范文之财务管理
2019/08/09 职场文书