Heim > Artikel > Web-Frontend > JS基于Mootools实现的个性菜单效果代码_javascript技巧
JS基于Mootools实现的个性菜单效果代码_javascript技巧
- WBOYOriginal
- 2016-05-16 15:36:041128Durchsuche
本文实例讲述了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程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS实现的竖向折叠菜单代码_javascript技巧Nächster Artikel：javascript省市级联功能实现方法实例详解_javascript技巧