JS基于Mootools实现的个性菜单效果代码

 更新时间:2015年10月21日 10:26:32   作者:企鹅  
这篇文章主要介绍了JS基于Mootools实现的个性菜单效果代码,涉及JavaScript页面元素的遍历及样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:

这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools.1.11.js一并下载到本地。注意,如果看不到效果请刷新网页。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-mootools-style-menu-codes/

具体代码如下:

<!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程序设计有所帮助。

相关文章

  • 原生js仿淘宝网商品放大镜效果

    原生js仿淘宝网商品放大镜效果

    本文主要介绍了原生js仿淘宝网商品放大镜效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Javascript 引擎工作机制详解

    Javascript 引擎工作机制详解

    我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念需要的朋友可以参考下
    2016-11-11
  • 微信小程序wx.request拦截器使用详解

    微信小程序wx.request拦截器使用详解

    这篇文章主要介绍了微信小程序wx.request拦截器详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 基于Bootstrap下拉框插件bootstrap-select使用方法详解

    基于Bootstrap下拉框插件bootstrap-select使用方法详解

    这篇文章主要为大家详细介绍了基于Bootstrap下拉框插件bootstrap-select的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • EasyUi中的Combogrid 实现分页和动态搜索远程数据

    EasyUi中的Combogrid 实现分页和动态搜索远程数据

    jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据
    2016-04-04
  • js使用心得分享

    js使用心得分享

    这里给大家分享的是本人近期学习与使用javascript之后总结出来的一些经验和心得,虽然目前只有5点,但以后会慢慢更新,希望对大家能有所帮助。
    2015-01-01
  • JavaScript笔记之数据属性和存储器属性

    JavaScript笔记之数据属性和存储器属性

    本文给大家介绍js数据属性和存储器属性,及两种属性的区别,对js数据属性存储器属性相关知识感兴趣的朋友一起学习
    2016-03-03
  • JavaScript中动态向表格添加数据

    JavaScript中动态向表格添加数据

    本文给大家分享使用原生javascript实现动态向表格中添加数据的方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-01-01
  • JS实现在网页中弹出一个输入框的方法

    JS实现在网页中弹出一个输入框的方法

    这篇文章主要介绍了JS实现在网页中弹出一个输入框的方法,实例分析了prompt的用法,可用来设置密码,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 使用weixin-java-miniapp配置进行单个小程序的配置详解

    使用weixin-java-miniapp配置进行单个小程序的配置详解

    这篇文章主要介绍了使用weixin-java-miniapp配置进行单个小程序的配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03

最新评论