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