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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
js实现自定义路由
Feb 04 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
PHP数组实例详解
2016/06/26 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
js实现选项卡效果
2020/03/07 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python中list循环语句用法实例
2014/11/10 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
菜篮子工程实施方案
2014/03/08 职场文书
交通志愿者活动总结
2014/06/27 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
紧急迫降观后感
2015/06/15 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书