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 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
js倒计时抢购实例
Dec 20 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
js单词形式的运算符
2014/05/06 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python分布式环境下的限流器的示例
2017/10/26 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python xlsxwriter模块的使用
2020/12/24 Python
RetroStage德国:复古服装
2019/02/03 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
String和StringBuffer的区别
2015/08/13 面试题
汽车专业学生自我评价
2014/01/19 职场文书
家长给孩子的评语
2014/01/30 职场文书
标准版离职证明书
2014/09/12 职场文书
班主任自我评价范文
2015/03/11 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers