Rumah > Artikel > hujung hadapan web > Kod kesan menu diperibadikan JS berdasarkan kemahiran Mootools_javascript

Kod kesan menu diperibadikan JS berdasarkan kemahiran Mootools_javascript

WBOYasal: 2016-05-16 15:36:041160semak imbas

Contoh dalam artikel ini menerangkan kod kesan menu diperibadikan yang dilaksanakan oleh JS berdasarkan Mootools. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Berikut ialah demonstrasi menu menegak animasi berdasarkan Mootools Ia ditulis oleh seorang pemula dan berguna untuk mempelajari penggunaan Mootools Semasa memuat turun, sila berhati-hati untuk memuat turun mootools yang dirujuk secara luaran bersama-sama. tempatan. Ambil perhatian, jika anda tidak melihat kesannya, sila muat semula halaman web.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kod menu lipatan menegak yang dilaksanakan oleh kemahiran JS_javascriptArtikel seterusnya：Kod menu lipatan menegak yang dilaksanakan oleh kemahiran JS_javascript

Artikel berkaitan

Lihat lagi