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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue组件name的作用小结
May 23 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
vue实现跨域的方法分析
May 21 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递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
物业公司的岗位任命书
2014/06/06 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
初二学生评语大全
2014/12/26 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
网络研修随笔感言
2015/11/18 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript