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中children与find之间的区别详细解析
Nov 29 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JQuery中clone方法复制节点
May 18 Javascript
javascript中caller和callee详解
Aug 10 Javascript
node.js require() 源码解读
Dec 13 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
浅谈JS的二进制家族
May 09 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
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python3 修改默认环境的方法
2019/02/16 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Django工程的分层结构详解
2019/07/18 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python中的itertools的使用详解
2020/01/13 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
文化与传播毕业生求职信
2014/03/09 职场文书
安全生产月活动总结
2014/05/04 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
MySQL基础(二)
2021/04/05 MySQL
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python