"
Template:Peking2012 Epilogue
From 2012.igem.org
(Difference between revisions)
m (Created page with "<html> <style type="text/css"> - →* Peking 2012 Header * by Sun Sibai * this = /Template:Peking2012_Epilogue: #PKU_navi_index { position: fixed; bottom: 15px; left:...") |
m |
||
| Line 92: | Line 92: | ||
<div> | <div> | ||
| - | <ul id="PKU_navi_index"> | + | <ul id="PKU_navi_index" onmousemove="ShowNaviL();" onmouseout="WithdrawNaviL();"> |
| - | <li> | + | <li onmouseover="IndexMouseOver(this);" onmouseout="IndexMouseOut(this);"> |
<a href="#top" title="Back to Top" > | <a href="#top" title="Back to Top" > | ||
<img class="show" src="/wiki/images/a/a9/Peking2012_Index.png" alt="Index" /> | <img class="show" src="/wiki/images/a/a9/Peking2012_Index.png" alt="Index" /> | ||
| Line 104: | Line 104: | ||
<div> | <div> | ||
<ul id="PKU_navi_history"> | <ul id="PKU_navi_history"> | ||
| - | <li> | + | <li onmouseover="ButtonMouseOver(this);" onmouseout="ButtonMouseOut(this);"> |
<img class="show" src="/wiki/images/4/46/Peking2012_History.png" alt="Peking" /> | <img class="show" src="/wiki/images/4/46/Peking2012_History.png" alt="Peking" /> | ||
<img class="show" src="/wiki/images/b/b7/Peking2012_History_H.png" alt="Peking" /> | <img class="show" src="/wiki/images/b/b7/Peking2012_History_H.png" alt="Peking" /> | ||
| Line 143: | Line 143: | ||
</div> | </div> | ||
| - | |||
<div> | <div> | ||
| - | <ul id="PKU_navi_L"> | + | <ul id="PKU_navi_L" onmouseover="HoldNaviL();" onmouseout="WithdrawNaviL();"> |
<li> | <li> | ||
<img src="/wiki/images/6/68/Peking2012_Above_S.png" alt="" /> | <img src="/wiki/images/6/68/Peking2012_Above_S.png" alt="" /> | ||
| Line 159: | Line 158: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | --> | + | |
| + | <script type="text/javascript" > | ||
| + | /* | ||
| + | * Peking 2012 Index | ||
| + | * by Sun Sibai | ||
| + | * E-mail: sun.niasw@gmail.com | ||
| + | */ | ||
| + | var IndexOn = 0; | ||
| + | |||
| + | function IndexMouseOver(objPointer) | ||
| + | { | ||
| + | var Img = objPointer.getElementsByTagName("img"); | ||
| + | Img[2].style.display = "block"; | ||
| + | Img[1].style.display = "none"; | ||
| + | Img[0].style.display = "none"; | ||
| + | } | ||
| + | |||
| + | function IndexMouseOut(objPointer) | ||
| + | { | ||
| + | var Img = objPointer.getElementsByTagName("img"); | ||
| + | Img[2].style.display = "none"; | ||
| + | if (IndexOn == 0) | ||
| + | { | ||
| + | Img[0].style.display = "block"; | ||
| + | Img[1].style.display = "none"; | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | Img[1].style.display = "block"; | ||
| + | Img[0].style.display = "none"; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | var NaviL_Cur = 0; | ||
| + | var NaviL_Des = 0; | ||
| + | var NaviR_Cur = 0; | ||
| + | var NaviR_Des = 0; | ||
| + | var handle_NaviL = null; | ||
| + | var handle_NaviR = null; | ||
| + | |||
| + | function ShowNaviL() | ||
| + | { | ||
| + | HoldNaviL(); | ||
| + | NaviL_Des = 1; | ||
| + | } | ||
| + | function HideNaviL() | ||
| + | { | ||
| + | NaviL_Des = 0; | ||
| + | if (handle_NaviL) clearTimeout(handleNaviL); | ||
| + | handleNaviL = null; | ||
| + | IndexOn = 0; | ||
| + | } | ||
| + | function WithdrawNaviL() | ||
| + | { | ||
| + | handle_NaviL = setTimeout("HideNaviL();",1000); | ||
| + | } | ||
| + | function HoldNaviL() | ||
| + | { | ||
| + | IndexOn = 1; | ||
| + | if (handle_NaviL) | ||
| + | { | ||
| + | clearTimeout(handle_NaviL); | ||
| + | handle_NaviL = null; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function FreshNavi() | ||
| + | { | ||
| + | NaviL_Cur += ( NaviL_Des - NaviL_Cur ) * 0.35; | ||
| + | NaviR_Cur += ( NaviR_Des - NaviR_Cur ) * 0.35; | ||
| + | |||
| + | var tmp; | ||
| + | |||
| + | tmp = document.getElementById("PKU_navi_L"); | ||
| + | tmp.style.width = NaviL_Cur * 480 + "px"; | ||
| + | |||
| + | tmp = document.getElementById("PKU_navi_R"); | ||
| + | tmp.style.width = NaviR_Cur * 150 + "px"; | ||
| + | } | ||
| + | |||
| + | var handleFreshNavi = setInterval("FreshNavi();",50); | ||
| + | |||
| + | var menutitle = document.getElementsByTagName("h3"); | ||
| + | var menuhtml = ""; | ||
| + | var menuiter = null; | ||
| + | |||
| + | for (menuiter=0;menuiter<menutitle.length;++menuiter) | ||
| + | { | ||
| + | menuhtml += '<li><a href="#title' + menuiter + '">' + menutitle[menuiter].innerHTML + "</a></li>"; | ||
| + | } | ||
| + | |||
| + | var menunavi = document.getElementById("PKU_navi_menu"); | ||
| + | menunavi.innerHTML = menuhtml; | ||
| + | |||
| + | </script> | ||
</html> | </html> | ||
Revision as of 08:01, 13 August 2012
