Team:KIT-Kyoto/Test
From 2014.igem.org
(Difference between revisions)
(104 intermediate revisions not shown) | |||
Line 26: | Line 26: | ||
<!--メインコンテンツ--> | <!--メインコンテンツ--> | ||
<div id="container"> | <div id="container"> | ||
- | < | + | <div id="topmenu"> |
- | < | + | <div class="timg"> |
- | <a href="javascript:void(0);"> | + | <div class="show"> |
- | <img | + | <a href="javascript:void(0);"><img src="/wiki/images/6/6b/Kit_Welcome.png"></a></div> |
- | < | + | |
+ | <div class="hide"> | ||
+ | <a href="javascript:void(0);"><img src="/wiki/images/3/3f/Kit_Welcome_on_c.jpg" width="1920"></a></div> | ||
+ | </div> | ||
+ | |||
+ | <div class="timg"> | ||
+ | <div class="show"> | ||
+ | <a href="/Team:KIT-Kyoto/About"><img src="/wiki/images/b/bf/Kit_Abou_Us.png" width="1920"> | ||
</a> | </a> | ||
- | </ | + | </div> |
- | < | + | <div class="hide"> |
- | <a href="/Team:KIT-Kyoto/About"> | + | <a href="/Team:KIT-Kyoto/About"><img src="/wiki/images/8/8e/Kit_Abou_Us_on_c.jpg" width="1920"> |
- | <img | + | |
- | + | ||
</a> | </a> | ||
- | </ | + | </div> |
- | < | + | </div> |
- | <a href="/Team:KIT-Kyoto/Project"> | + | |
- | <img | + | <div class="timg"> |
- | + | <div class="show"> | |
+ | <a href="/Team:KIT-Kyoto/Project"><img src="/wiki/images/c/c2/Kit_Projectmenu.png" width="1920"> | ||
</a> | </a> | ||
- | </ | + | </div> |
- | < | + | <div class="hide"> |
- | <a href="/Team:KIT-Kyoto/ | + | <a href="/Team:KIT-Kyoto/Project"><img src="/wiki/images/1/11/Kit_Project_on_c.jpg" width="1920"> |
- | <img | + | |
- | + | ||
</a> | </a> | ||
- | </ | + | </div> |
- | < | + | </div> |
- | <a href="/Team:KIT-Kyoto/ | + | |
- | <img | + | <div class="timg"> |
- | + | <div class="show"> | |
+ | <a href="/Team:KIT-Kyoto/HumanPractice"><img src="/wiki/images/7/7e/Kit_PP.png" width="1920"> | ||
</a> | </a> | ||
- | </ | + | </div> |
- | < | + | <div class="hide"> |
- | <a href="/Team:KIT-Kyoto/ | + | <a href="/Team:KIT-Kyoto/HumanPractice"><img src="/wiki/images/e/e6/Kit_PP_on_c.jpg" width="1920"> |
- | <img | + | |
- | + | ||
</a> | </a> | ||
- | </ | + | </div> |
- | </ | + | </div> |
+ | |||
+ | <div class="timg"> | ||
+ | <div class="show"> | ||
+ | <a href="/Team:KIT-Kyoto/Achievement"><img src="/wiki/images/8/82/Kit_Achievement.png" width="1920"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="hide"> | ||
+ | <a href="/Team:KIT-Kyoto/Achievement"><img src="/wiki/images/6/6d/Kit_Achievement_on_c.jpg" width="1920"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="timg"> | ||
+ | <div class="show"> | ||
+ | <a href="/Team:KIT-Kyoto/Labnote"><img src="/wiki/images/1/17/Kit_LN.png" width="1920"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="hide"> | ||
+ | <a href="/Team:KIT-Kyoto/Labnote"><img src="/wiki/images/1/1b/Kit_LN_on_c.jpg" width="1920"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
<div class="clear"><hr /></div> | <div class="clear"><hr /></div> | ||
<div id='kitfooter-box' class='noprint'> | <div id='kitfooter-box' class='noprint'> | ||
Line 98: | Line 125: | ||
<style style="text/css"> | <style style="text/css"> | ||
#kitfooter-box{ | #kitfooter-box{ | ||
- | background-color:rgba(100,100,100,0 | + | background-color:rgba(100,100,100,0); |
+ | z-index:1; | ||
+ | } | ||
+ | #fkit a{ | ||
+ | color:#fff; | ||
} | } | ||
#bodyContent{ | #bodyContent{ | ||
Line 107: | Line 138: | ||
min-height:100%; | min-height:100%; | ||
position:relative; | position:relative; | ||
+ | background-color:rgba(0,0,0,0.7); | ||
} | } | ||
- | + | #topmenu{ | |
- | margin:14px | + | margin-top:14px; |
- | + | ||
position:relative; | position:relative; | ||
} | } | ||
- | + | #topmenu a{ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display:block; | display:block; | ||
position:relative; | position:relative; | ||
Line 129: | Line 152: | ||
} | } | ||
- | . | + | .timg{ |
position:relative; | position:relative; | ||
+ | margin:0; | ||
+ | } | ||
+ | .show,.hide{ | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | position:absolute; | ||
top:0; | top:0; | ||
left:0; | left:0; | ||
+ | marign:0; | ||
+ | } | ||
+ | .show{ | ||
z-index:3; | z-index:3; | ||
} | } | ||
- | |||
.hide{ | .hide{ | ||
- | |||
- | |||
- | |||
z-index:2; | z-index:2; | ||
} | } | ||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | $(function(){ | + | $(function(){ |
- | var ua = navigator.userAgent; | + | var topimg = function(){ |
+ | var w = $("#container").width(); | ||
+ | $(".timg,.timg a img").css({width:w}); | ||
+ | var imgh = $('.show img').height(); | ||
+ | $(".timg").css({height:imgh}); | ||
+ | } | ||
+ | $(function(){ | ||
+ | topimg(); | ||
+ | $(window).resize(topimg); | ||
+ | }); | ||
+ | topimg(); | ||
+ | $('.hide').css('opacity','0'); | ||
+ | $('.show a,.hide a').hover(function(){ | ||
+ | var tnum = $('.show a').index(this); | ||
+ | $('.show').eq(tnum).stop().animate({opacity:'0'},400); | ||
+ | $('.hide').eq(tnum).stop().animate({opacity:'1'},400); | ||
+ | }, | ||
+ | function(){ | ||
+ | var tnum = $('.show a').index(this); | ||
+ | $('.show').eq(tnum).stop().animate({opacity:'1'},400); | ||
+ | $('.hide').eq(tnum).stop().animate({opacity:'0'},400); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | var slide = function(){ | ||
+ | $("#SideMenu").animate({left:'0px'},500,'swing'); | ||
+ | $("#close").animate({left:'215px'},500,'swing').addClass("close"); | ||
+ | $(".logo").animate({left:'250'},500,'swing'); | ||
+ | $("#container").animate({margin:'0px 0px 0px 250px'},{duration:500,easing:'swing',complete:function(){topimg();},}); | ||
+ | $(".toplogo,#nav5,.active,.submenu").animate({opacity:'1'},800,'swing'); | ||
+ | setTimeout(function(){ | ||
+ | $("#close a") | ||
+ | .css({'background-image':'url("https://static.igem.org/mediawiki/2014/6/6d/Kit_close.png")' | ||
+ | });},500); | ||
+ | } | ||
+ | var ua = navigator.userAgent; | ||
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){ | if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){ | ||
- | }else { | + | setTimeout(function(){topimg();},1100); |
+ | $("#container").css({marginTop:'65px',marginLeft:'0px'}); | ||
+ | }else{ | ||
$("#close").removeClass('close'); | $("#close").removeClass('close'); | ||
$("#SideMenu").css({"left":"-215px"}); | $("#SideMenu").css({"left":"-215px"}); | ||
Line 154: | Line 219: | ||
$(".toplogo,#nav5,.active,.submenu").css({opacity:'0'}); | $(".toplogo,#nav5,.active,.submenu").css({opacity:'0'}); | ||
$("#close a").css({'background-image':'url("https://static.igem.org/mediawiki/2014/d/d0/Kit_open.png")'}); | $("#close a").css({'background-image':'url("https://static.igem.org/mediawiki/2014/d/d0/Kit_open.png")'}); | ||
+ | setTimeout(function(){ | ||
+ | slide(); | ||
+ | },2100); | ||
} | } | ||
+ | |||
$('#close a') | $('#close a') | ||
.click(function(){ | .click(function(){ | ||
+ | |||
var closed = $("#close").hasClass("close"); | var closed = $("#close").hasClass("close"); | ||
if(closed){ | if(closed){ | ||
Line 162: | Line 232: | ||
$("#close").animate({left:'0px'},500,'swing').removeClass("close"); | $("#close").animate({left:'0px'},500,'swing').removeClass("close"); | ||
$(".logo").animate({left:'40'},500,'swing'); | $(".logo").animate({left:'40'},500,'swing'); | ||
- | $("#container").animate({margin:'0px 0px 0px 35px'},500,'swing'); | + | $("#container").animate({margin:'0px 0px 0px 35px'},{duration:500,easing:'swing',complete:function(){topimg();},}); |
$(".toplogo,#nav5,.active,.submenu").animate({opacity:'0'},800,'swing'); | $(".toplogo,#nav5,.active,.submenu").animate({opacity:'0'},800,'swing'); | ||
setTimeout(function(){ | setTimeout(function(){ | ||
Line 168: | Line 238: | ||
},500); | },500); | ||
}else { | }else { | ||
- | + | slide(); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | }) | + | }); |
}); | }); | ||
</script> | </script> |
Latest revision as of 02:43, 11 October 2014