JS基于Mootools实现的个性菜单效果代码


Posted in Javascript onOctober 21, 2015

本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:

这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools.1.11.js一并下载到本地。注意,如果看不到效果请刷新网页。

运行效果截图如下:

JS基于Mootools实现的个性菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head"> 
<title>Mootools做的有意思菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body, div, ul, ol, li, a{margin: 0;padding: 0;font-size:12px; color: #fff}
#navigator { height: 50px; background: url(images/o_topnav.png) repeat-x 0 0; position: relative; width:450px;margin:auto; margin-top: 80px}
#navList { margin: 0; height: 30px }
#navList li { float: left; height: 50px; line-height: 30px; list-style-type: none; background: url(images/o_topnav.png) repeat-x 0 0; }
#navList li a { display: block; height: 50px; line-height: 30px; padding: 0 15px; text-align: center }
</style>
<script src="mootools.1.11.js" type="text/javascript"></script>
</head>
<body bgcolor="#000000">
<div id="navigator">
 <ul id="navList">
 <li><a id="MyLinks1_HomeLink" class="menu" href="#">我的首页</a></li>
 <li><a id="MyLinks1_SpaceLink" class="menu" href="#">工作日志</a></li>
 <li><a id="MyLinks1_MyHomeLink" class="menu" href="#">情感博客</a></li>
 <li><a id="MyLinks1_NewPostLink" class="menu" href="#">与我联系</a></li>
 <li><a id="MyLinks1_ContactLink" accesskey="9" class="menu" href="#">关于我</a></li>
 <li><a id="MyLinks1_Admin" class="menu" href="#">管理</a></li>
 <li><a id="MyLinks1_Syndication" class="menu" href="#">rss</a></li>
 </ul>
</div>
<script type="text/javascript">
var fx=[];
$$("#navList li").each(function(el,i){
 fx.push(new Fx.Style(el,'margin-top',{duration:500}));
  el.addEvents({
   mouseenter: function(){
   fx[i].stop().start(-20);
  }.bind(i),
  mouseleave: function(){
   fx[i].stop().start(0);
  }.bind(i)
 });
});
</script>
<br>如果看不到效果,请刷新网页。
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript与CSS复习(二)
Jun 29 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
纯javascript实现自动发送邮件
Oct 21 #Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 #Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 #Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 #Javascript
chrome调试javascript详解
Oct 21 #Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 #Javascript
深入解析JavaScript的闭包机制
Oct 20 #Javascript
You might like
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python使用psutil模块获取系统状态
2016/08/27 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python中requests和https使用简单示例
2018/01/18 Python
Flask之flask-session的具体使用
2018/07/26 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript