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 API学Jquery之一 选择器
Apr 07 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
js实现产品缩略图效果
Mar 10 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
vue获取form表单的值示例
Oct 29 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
详解PHP中的状态模式编程
2015/08/11 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
降低PHP Redis内存占用
2017/03/23 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
解决Python3下map函数的显示问题
2019/12/04 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
作文评语大全
2014/04/23 职场文书
公司门卫工作职责
2014/06/28 职场文书
中学校园广播稿
2015/08/18 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
靠谱的活动总结
2019/04/16 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电