"
Template:Peking2012 Color Project
From 2012.igem.org
(Difference between revisions)
m |
m |
||
| Line 9: | Line 9: | ||
</script> | </script> | ||
<div class="floatL"> | <div class="floatL"> | ||
| - | <ul id="PKU_subsubmenu" class="vertical"> | + | <ul id="PKU_subsubmenu" class="vertical" onmouseout="listReset();"> |
| - | <li class="trunk" style="background-image:url('/wiki/images/a/a4/Peking2012_Color_Title_FlameYellow.jpg');"> | + | <li class="trunk" style="background-image:url('/wiki/images/a/a4/Peking2012_Color_Title_FlameYellow.jpg');" onmouseover="listTrigger(0);"> |
<a href="/Team:Peking/Project/Luminesensor">Luminesensor</a> | <a href="/Team:Peking/Project/Luminesensor">Luminesensor</a> | ||
| - | </li><li class="branch"> | + | </li><li class="branch" onmouseover="listTrigger(0);"> |
<ul class="vertical"> | <ul class="vertical"> | ||
<li> | <li> | ||
| Line 24: | Line 24: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| - | </li><li class="trunk" style="background-image:url('/wiki/images/a/a2/Peking2012_Color_Title_FreshGreen.jpg');"> | + | </li><li class="trunk" style="background-image:url('/wiki/images/a/a2/Peking2012_Color_Title_FreshGreen.jpg');" onmouseover="listTrigger(1);"> |
<a href="/Team:Peking/Project/Communication">Light Communication</a> | <a href="/Team:Peking/Project/Communication">Light Communication</a> | ||
| - | </li><li class="branch"> | + | </li><li class="branch" onmouseover="listTrigger(1);"> |
<ul class="vertical"> | <ul class="vertical"> | ||
<li> | <li> | ||
| Line 38: | Line 38: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| - | </li><li class="trunk" style="background-image:url('/wiki/images/f/fe/Peking2012_Color_Title_GrapePurple.jpg');"> | + | </li><li class="trunk" style="background-image:url('/wiki/images/f/fe/Peking2012_Color_Title_GrapePurple.jpg');" onmouseover="listTrigger(2);"> |
<a href="/Team:Peking/Project/3D">Syn Bio in 2D & 3D</a> | <a href="/Team:Peking/Project/3D">Syn Bio in 2D & 3D</a> | ||
| - | </li><li class="branch"> | + | </li><li class="branch" onmouseover="listTrigger(2);"> |
<ul class="vertical"> | <ul class="vertical"> | ||
<li> | <li> | ||
| Line 52: | Line 52: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| - | </li><li class="trunk" style="background-image:url('/wiki/images/5/50/Peking2012_Color_Title_CherryPink.jpg');"> | + | </li><li class="trunk" style="background-image:url('/wiki/images/5/50/Peking2012_Color_Title_CherryPink.jpg');" onmouseover="listTrigger(3);"> |
<a href="/Team:Peking/Project/Phototaxis">Phototaxis</a> | <a href="/Team:Peking/Project/Phototaxis">Phototaxis</a> | ||
| - | </li><li class="branch"> | + | </li><li class="branch" onmouseover="listTrigger(3);"> |
<ul class="vertical"> | <ul class="vertical"> | ||
<li> | <li> | ||
| Line 81: | Line 81: | ||
} | } | ||
var handleFollowing = setInterval(Following,30); | var handleFollowing = setInterval(Following,30); | ||
| + | </script><script type="text/javascript"> | ||
| + | /* | ||
| + | * Peking 2012 Drawer | ||
| + | * by Sun Sibai | ||
| + | */ | ||
| + | var sublists_Num = 4; //Total Number | ||
| + | var sublists_Cur = -1; //Current Grow | ||
| + | var sublists_Now = 0; //Current Page | ||
| + | var subLhght = [120,120,120,90]; //Unit: Pixel | ||
| + | var subLhght_Cur = [0,0,0,0]; //Unit: Pixel | ||
| + | var subLhand_Wither = [null,null,null,null]; | ||
| + | var subLhand_Growth = null; | ||
| + | var subLhand_Return = null; | ||
| + | var sublists = subfirst.childNodes; | ||
| + | for (var it=0;it<sublists_Num;++it) | ||
| + | { | ||
| + | sublists[2*it+2].style.height=subLhght_Cur[it]+'px'; | ||
| + | sublists[2*it+2].style.display='none'; | ||
| + | } | ||
| + | /* Automatic Function */ | ||
| + | function listGrowth() | ||
| + | { | ||
| + | subLhght_Cur[sublists_Cur] = subLhght_Cur[sublists_Cur] * 0.7 + subLhght[sublists_Cur] * 1.2 * 0.3; | ||
| + | if (subLhght_Cur[sublists_Cur]>=subLhght[sublists_Cur]) | ||
| + | { | ||
| + | subLhght_Cur[sublists_Cur]=subLhght[sublists_Cur]; | ||
| + | subLhand_Growth = null; | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | subLhand_Growth = setTimeout(listGrowth,50); | ||
| + | } | ||
| + | sublists[2*sublists_Cur+2].style.height=subLhght_Cur[sublists_Cur]+'px'; | ||
| + | } | ||
| + | function listWitherFunc(i) | ||
| + | { | ||
| + | return function() {listWither(i);}; | ||
| + | } | ||
| + | function listWither(i) | ||
| + | { | ||
| + | subLhght_Cur[i] = subLhght_Cur[i] * 0.7 - 0.5; | ||
| + | if (subLhght_Cur[i]<=0) | ||
| + | { | ||
| + | subLhght_Cur[i] = 0; | ||
| + | subLhand_Wither[i] = null; | ||
| + | sublists[2*i+2].style.display='none'; | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | subLhand_Wither[i] = setTimeout(listWitherFunc(i),50); | ||
| + | } | ||
| + | sublists[2*i+2].style.height=subLhght_Cur[i]+'px'; | ||
| + | } | ||
| + | function listReturn() | ||
| + | { | ||
| + | listTrigger(sublists_Now); | ||
| + | subLhand_Return = null; | ||
| + | } | ||
| + | /* Trigger Function */ | ||
| + | function listTrigger(i) | ||
| + | { | ||
| + | if (subLhand_Return) {clearTimeout(subLhand_Return);subLhand_Return=null;} | ||
| + | if (i!=sublists_Cur) | ||
| + | { | ||
| + | if (subLhand_Growth) {clearTimeout(subLhand_Growth);} | ||
| + | if (sublists_Cur>=0) {if (!subLhand_Wither[sublists_Cur]) {listWither(sublists_Cur);}} | ||
| + | if (subLhand_Wither[i]) {clearTimeout(subLhand_Wither[i]);subLhand_Wither[i]=null;} | ||
| + | sublists[2*i+2].style.display='block'; | ||
| + | sublists_Cur = i; | ||
| + | listGrowth(); | ||
| + | } | ||
| + | } | ||
| + | function listReset() | ||
| + | { | ||
| + | if (subLhand_Return) {clearTimeout(listReturn);} | ||
| + | subLhand_Return = setTimeout(listReturn,1000); | ||
| + | } | ||
</script> | </script> | ||
</html> | </html> | ||
Revision as of 07:36, 15 September 2012
