|
|
(6 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
- |
| |
| <style type="text/css"> | | <style type="text/css"> |
| | | |
- | /*
| + | #totop{ |
- | * Peking 2012 Header
| + | position: fixed; |
- | * by Sun Sibai
| + | bottom: 15px; |
- | * this = /Template:Peking2012_Epilogue
| + | right: 15px;} |
- | */
| + | #totop li |
- | #PKU_navi_index,
| + | |
- | #PKU_navi_totop
| + | |
- | #PKU_navi_index li ,
| + | |
- | #PKU_navi_totop li | + | |
| { | | { |
- | width: 88px; | + | width: 100px; |
- | height: 31px; | + | height: 106px; |
| padding: 0; | | padding: 0; |
| overflow: hidden; | | overflow: hidden; |
- | }
| |
- | #PKU_navi_index,
| |
- | #PKU_navi_totop
| |
- | {
| |
- | position: fixed;
| |
- | bottom: 15px;
| |
- | }
| |
- | #PKU_navi_index
| |
- | {
| |
- | left: 15px;
| |
- | }
| |
- | #PKU_navi_totop
| |
- | {
| |
- | right: 15px;
| |
- | }
| |
- | #PKU_navi_index li,
| |
- | #PKU_navi_totop li
| |
- | {
| |
| display: block; | | display: block; |
| float: left; | | float: left; |
| } | | } |
- |
| |
- | #PKU_navi_menu
| |
- | {
| |
- | position: fixed;
| |
- | bottom: 46px;
| |
- | left: 15px;
| |
- | width: 0;
| |
- | height: 0;
| |
- | padding: 15px;
| |
- | overflow: hidden;
| |
- | display: block;
| |
- | line-height: 20px;
| |
- | font-size: 16px;
| |
- | font-family: Arial, sans-serif;
| |
- | background-color: #354080;
| |
- | border-style: solid;
| |
- | border-width: 1px;
| |
- | border-color: #35dfff;
| |
- | z-index: 20;
| |
- | filter: Alpha(Opacity=90%);
| |
- | -moz-opacity: 0.9;
| |
- | opacity: 0.9;
| |
- | }
| |
- | #PKU_navi_menu *
| |
- | {
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | overflow: hidden;
| |
- | }
| |
- | #PKU_navi_menu a,
| |
- | #PKU_navi_menu a:link,
| |
- | #PKU_navi_menu a:visited
| |
- | {
| |
- | color: #fffea3;
| |
- | }
| |
- | #PKU_navi_menu a:hover,
| |
- | #PKU_navi_menu a:active
| |
- | {
| |
- | color: #ffffff;
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
| </style> | | </style> |
| <div> | | <div> |
- | <ul id="PKU_navi_totop"> | + | <ul id="totop"> |
- | <li onmouseover="ButtonMouseOver(this);" onmouseout="ButtonMouseOut(this);" onclick="NaviTotop();"> | + | <li onmouseover="ButtonMouseOver(this);" onmouseout="ButtonMouseOut(this);" onclick="NaviTotop();"> |
- | <img src="/wiki/images/e/e2/Peking2012_Top.png" alt="Totop" /> | + | <img src="/wiki/images/a/a3/Flytotop.png" alt="Totop" /> |
- | <img src="/wiki/images/0/0d/Peking2012_Top_H.png" alt="Totop" />
| + | |
| </li> | | </li> |
- | </ul>
| |
- | </div>
| |
- | <div>
| |
- | <ul id="PKU_navi_index" class="button">
| |
- | <li onmouseover="ButtonMouseOver(this);NaviIndexTrigger();" onmouseout="NaviIndexWaiting();">
| |
- | <a title="Page Index">
| |
- | <img src="/wiki/images/a/a9/Peking2012_Index.png" alt="Index" />
| |
- | <img src="/wiki/images/8/81/Peking2012_Index_H.png" alt="Index" />
| |
- | </a>
| |
- | </li>
| |
- | </ul>
| |
- | </div>
| |
- | <div>
| |
- | <ul id="PKU_navi_menu" class="vertical" onmouseover="NaviIndexTrigger();" onmouseout="NaviIndexWaiting();">
| |
| </ul> | | </ul> |
| </div> | | </div> |
| | | |
| <script type="text/javascript" > | | <script type="text/javascript" > |
- | /*
| |
- | * Peking 2012 Index
| |
- | * by Sun Sibai
| |
- | * E-mail: sun.niasw@gmail.com
| |
- | */
| |
- | var naviMenu = document.getElementById('PKU_navi_menu');
| |
- | var naviIndex = document.getElementById('PKU_navi_index');
| |
- |
| |
- | var naviIndex_Cur = 0;
| |
- | var naviIndex_Des = 1;
| |
- | var naviHandle = null;
| |
- | var naviHandleState = 0; //0:Noop 1:Growth 2:Wait 3:Wither
| |
- |
| |
- | var menutitle = document.getElementsByTagName("h3");
| |
- | var menuhtml = "";
| |
- | var indexheight = 1.5 * (menutitle.length+2) * 16; /* 1em = 16px */
| |
- |
| |
- | function ButtonMouseOver(objPointer)
| |
- | {
| |
- | var Img = objPointer.getElementsByTagName("img");
| |
- | Img[1].style.display = "block";
| |
- | Img[0].style.display = "none";
| |
- | }
| |
- |
| |
- | function ButtonMouseOut(objPointer)
| |
- | {
| |
- | var Img = objPointer.getElementsByTagName("img");
| |
- | Img[0].style.display = "block";
| |
- | Img[1].style.display = "none";
| |
- | }
| |
- |
| |
- | function NaviIndexGrowth()
| |
- | {
| |
- | naviIndex_Cur = naviIndex_Cur * 0.7 + naviIndex_Des * 1.2 * 0.3;
| |
- | if (naviIndex_Cur>=naviIndex_Des)
| |
- | {
| |
- | naviIndex_Cur=naviIndex_Des;
| |
- | naviHandle = null;
| |
- | naviHandleState = 0;
| |
- | }
| |
- | else
| |
- | {
| |
- | naviHandle = setTimeout(NaviIndexGrowth,50);
| |
- | }
| |
- | naviMenu.style.width=naviIndex_Cur*250+'px';
| |
- | naviMenu.style.height=naviIndex_Cur*indexheight+'px';
| |
- | }
| |
- | function NaviIndexWither()
| |
- | {
| |
- | naviIndex_Cur = naviIndex_Cur * 0.7 - 0.1;
| |
- | if (naviIndex_Cur<=0)
| |
- | {
| |
- | naviIndex_Cur=0;
| |
- | naviHandle = null;
| |
- | naviHandleState = 0;
| |
- | ButtonMouseOut(naviIndex);
| |
- | naviMenu.style.display="none";
| |
- | }
| |
- | else
| |
- | {
| |
- | naviHandle = setTimeout(NaviIndexWither,50);
| |
- | }
| |
- | naviMenu.style.width=naviIndex_Cur*250+'px';
| |
- | naviMenu.style.height=naviIndex_Cur*indexheight+'px';
| |
- | }
| |
- | function NaviIndexReturn()
| |
- | {
| |
- | naviHandle = null;
| |
- | naviHandleState = 3;
| |
- | NaviIndexWither();
| |
- | }
| |
- | function NaviIndexWaiting()
| |
- | {
| |
- | if (naviHandle) {clearTimeout(naviHandle);}
| |
- | naviHandle=setTimeout(NaviIndexReturn,1000);
| |
- | naviHandleState=2;
| |
- | }
| |
- | function NaviIndexTrigger()
| |
- | {
| |
- | naviMenu.style.display="block";
| |
- | if (naviHandleState>1) {clearTimeout(naviHandle);naviHandle=null;}
| |
- | if (naviHandleState!=1) {NaviIndexGrowth();naviHandleState=1;}
| |
- | }
| |
- |
| |
| var PageScrollElem,PageScrollBody; | | var PageScrollElem,PageScrollBody; |
| var PageScrollHand=null; | | var PageScrollHand=null; |
Line 220: |
Line 56: |
| PageScrollTotop(); | | PageScrollTotop(); |
| } | | } |
- |
| |
- | for (var it=1;it<menutitle.length;++it)
| |
- | {
| |
- | menuhtml += '<li><a href="#title' + it + '">' + menutitle[it].innerHTML.replace(/<[^>]*>/g,"") + "</a></li>";
| |
- | }
| |
- | naviMenu.innerHTML = menuhtml;
| |
- | naviMenu.style.display="none";
| |
| | | |
| </script> | | </script> |