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匿名函数的一种应用 代码封装
Jun 27 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
php-msf源码详解
2017/12/25 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python 实现字符串下标的输出功能
2020/02/13 Python
keras 多任务多loss实例
2020/06/22 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
列车长先进事迹材料
2014/01/25 职场文书
2014年实习生工作总结
2014/11/27 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技