JS personalisierter Menüeffektcode basierend auf Mootools_javascript-Fähigkeiten-js-Tutorial-php.cn

JS personalisierter Menüeffektcode basierend auf Mootools_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:36:04

Original

1187 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den personalisierten Menüeffektcode, der von JS basierend auf Mootools implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration eines animierten vertikalen Menüs basierend auf Mootools. Es wurde von einem Anfänger geschrieben und ist hilfreich, um die Verwendung von Mootools zu erlernen. Achten Sie beim Herunterladen darauf, dass Sie die extern referenzierten mootools.1.11.js zusammen herunterladen. lokal. Hinweis: Wenn Sie den Effekt nicht sehen, aktualisieren Sie bitte die Webseite.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.