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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
详解angular中的作用域及继承
May 31 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
详解原生JS回到顶部
Mar 25 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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 购物车的例子
2009/05/04 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
sails框架的学习指南
2014/12/22 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python中enumerate的用法实例解析
2014/08/18 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
高级Java程序员面试要点
2013/08/02 面试题
我的理想演讲稿
2014/04/30 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
党支部半年考察意见
2015/06/01 职场文书