Biomod/2012/HKBU/BU Magician

From OpenWetWare
Revision as of 09:01, 4 October 2012 by Runmin Wang (talk | contribs)
Jump to navigationJump to search

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jOuery</title> <link rel="stylesheet" href="style.css" /> <style> .menu { height: 45px; display: block; } .menu ul { list-style: none; padding: 0; margin: 0; } .menu ul li { float: left; /* 菜单子元素的内容超出不可见 */ overflow: hidden; position: relative; text-align: center; line-height: 45px; } .menu ul li a { /* 必须是相对定位 */ position: relative; display: block; width: 110px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .menu ul li a span { /* 所有层将使用绝对定位 */ position: absolute; left: 0; width: 110px; } .menu ul li a span.out { top: 0px; } .menu ul li a span.over, .menu ul li a span.bg { /* 起初.over层和.bg层相对a元素-45px以达到隐藏 */ top: -45px; }

/** 简化版示例 **/

#menu2 { background:#45A8DF; }

  1. menu2 ul li a { color:#FFF; }
  2. menu2 ul li a span.over { background: #A6DD00; color:#333; }
  3. menu2 ul li.nav1 a span.over { background: #fea274; }
  4. menu2 ul li.nav2 a span.over { background: #b0bbba; }
  5. menu2 ul li.nav3 a span.over { background: #a3f091; }
  6. menu2 ul li.nav4 a span.over { background: #86dbf9; }
  7. menu2 ul li.nav5 a span.over { background: #e0caf0; }
  8. menu2 ul li.nav6 a span.over { background: #9dace9; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script language="javascript"> $(document).ready(function() { /* 简化版示例 */

$("#menu2 li a").wrapInner( '<span class="out"></span>' );

$("#menu2 li a").each(function() { $('<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); });

$("#menu2 li a").hover(function() { $(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏 $(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示

}, function() { $(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示 $(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏 });

});

</script> </head> <body>

<div id="HEADER"> 

 <div id="menu2" class="menu" style="width: 708px">
   <ul>
     <li class="nav1"><a href="javascript:;">Home</a></li>
     <li class="nav2"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Projects">Projects</a></li>
     <li class="nav3"><a href="javascript:;">JavaScript</a></li>
     <li class="nav4"><a href="javascript:;">Resources</a></li>
     <li class="nav5"><a href="javascript:;">Tutorials</a></li>
     <li class="nav6"><a href="javascript:;">About</a></li>
   </ul>
 </div>

</div> </body> </html>

Welcome to BU Magician Homepage

I work in the Your Lab at XYZ University. I learned about OpenWetWare from From the wiki pages in Biomod competition 2011., and I've joined because To complete the wiki page required by the Biomod competition.

Abstract

I work in the Your Lab at XYZ University. I learned about OpenWetWare from From the wiki pages in Biomod competition 2011., and I've joined because To complete the wiki page required by the Biomod competition.

Video

<html> <object width="1000" height="900"><param name="movie" value="http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1"> 

 </param><param name="allowFullScreen" value="true">
 </param><param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="500">
 </embed>

</object>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2012/HKBU/BU_Magician&oldid=632453"