Difference between revisions of "Team:OUC-China"

Line 11: Line 11:
 
<style>
 
<style>
  
−
#bodyContent{
+
#bodyContent{
−
margin:0;
+
margin:0;
−
padding:0;     
+
padding:0;     
−
position:absolute;
+
position:absolute;
−
top:0 !important;
+
top:0 !important;
−
width:100%;
+
width:100%;
−
}
+
}
−
 
+
.copyright1 {
−
 
+
−
.copyright1 {
+
 
text-align: center;
 
text-align: center;
 
padding-top: 20px;
 
padding-top: 20px;
Line 33: Line 31:
 
         bottom: 0;
 
         bottom: 0;
 
         width:100%
 
         width:100%
 +
}
 +
.rr {
 +
    position: relative;
 +
}
 +
 +
 +
    .ouc-teammate{position: absolute;top: 0;z-index: 1000;opacity: 0;transition: 0.5s}
 +
.topleft1:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
.topleft2:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
.topleft3:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
.topleft4:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
.topleft5:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
.topleft6:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
.topleft7:hover .ouc-teammate{opacity: 1;transition: 0.5s}
 +
 +
.topleft1 {
 +
    position: absolute;
 +
    top: 26.5%;
 +
    left: 61%;
 +
    font-size: 18px;
 
}
 
}
−
 
+
#div1{
−
 
+
    position: absolute;
−
 
+
    top: 26%;
−
#myBtn {
+
    left: 5%;
−
  display: none;
+
    font-size: 18px;
−
  position: fixed;
+
−
  bottom: 5px;
+
−
  right: 30px;
+
−
  z-index: 99;
+
−
  border: none;
+
−
  outline: none;
+
−
  background-color: gray;
+
−
  color: white;
+
−
  cursor: pointer;
+
−
  padding: 15px;
+
−
  border-radius: 10px;
+
 
}
 
}
  
−
#myBtn:hover {
+
.topleft2 {
−
  background-color: #555;
+
    position: absolute;
 +
    top: 35.2%;
 +
    left: 10%;
 +
    font-size: 18px;
 
}
 
}
 +
#div2{
 +
    position: absolute;
 +
    top: 34%;
 +
    left: 40%;
 +
    font-size: 18px;
 +
}
 +
 +
.topleft3 {
 +
    position: absolute;
 +
    top: 45%;
 +
    left: 62%;
 +
    font-size: 18px;
 +
}
 +
#div3{
 +
    position: absolute;
 +
    top: 43%;
 +
    left: 6%;
 +
    font-size: 18px;
 +
}
 +
 +
.topleft4 {
 +
    position: absolute;
 +
    top: 54.5%;
 +
    left: 10%;
 +
    font-size: 18px;
 +
}
 +
#div4{
 +
    position: absolute;
 +
    top: 52%;
 +
    left: 40%;
 +
    font-size: 18px;
 +
}
 +
 +
.topleft5 {
 +
    position: absolute;
 +
    top: 64%;
 +
    left: 64%;
 +
    font-size: 18px;
 +
}
 +
#div5{
 +
    position: absolute;
 +
    top: 62%;
 +
    left: 6%;
 +
    font-size: 18px;
 +
}
 +
 +
.topleft6 {
 +
    position: absolute;
 +
    top: 73%;
 +
    left: 15%;
 +
    font-size: 18px;
 +
}
 +
#div6{
 +
    position: absolute;
 +
    top: 72%;
 +
    left: 45%;
 +
    font-size: 18px;
 +
}
 +
 +
 +
.topleft7 {
 +
    position: absolute;
 +
    top: 82%;
 +
    left: 64%;
 +
    font-size: 18px;
 +
}
 +
#div7{
 +
    position: absolute;
 +
    top: 82%;
 +
    left: 6%;
 +
    font-size: 18px;
 +
}
 
</style>
 
</style>
 +
<script>
 +
 +
 +
 
 +
$(document).ready(function(){
 +
    $(".topleft1").mouseover(function(){
 +
    $("#div1").fadeIn(50);
 +
  });
 +
});
 +
$(document).ready(function(){
 +
    $(".topleft1").mouseout(function(){
 +
        $("#div1").fadeOut(50);
 +
    });
 +
});
 +
  
 +
 
 +
$(document).ready(function(){
 +
  $(".topleft2").mouseover(function(){
 +
$("#div2").fadeIn(50);
 +
});
 +
});
 +
$(document).ready(function(){
 +
  $(".topleft2").mouseout(function(){
 +
    $("#div2").fadeOut(50);
 +
  });
 +
});
 +
  
 +
 +
 +
$(document).ready(function(){
 +
  $(".topleft3").mouseover(function(){
 +
$("#div3").fadeIn(50);
 +
});
 +
});
 +
$(document).ready(function(){
 +
  $(".topleft3").mouseout(function(){
 +
    $("#div3").fadeOut(50);
 +
  });
 +
});
 +
 +
 +
$(document).ready(function(){
 +
  $(".topleft4").mouseover(function(){
 +
$("#div4").fadeIn(50);
 +
});
 +
});
 +
$(document).ready(function(){
 +
  $(".topleft4").mouseout(function(){
 +
    $("#div4").fadeOut(50);
 +
  });
 +
});
 +
 +
 +
$(document).ready(function(){
 +
  $(".topleft5").mouseover(function(){
 +
$("#div5").fadeIn(50);
 +
});
 +
});
 +
$(document).ready(function(){
 +
  $(".topleft5").mouseout(function(){
 +
    $("#div5").fadeOut(50);
 +
  });
 +
});
 +
 +
 +
$(document).ready(function(){
 +
  $(".topleft6").mouseover(function(){
 +
$("#div6").fadeIn(50);
 +
});
 +
});
 +
$(document).ready(function(){
 +
  $(".topleft6").mouseout(function(){
 +
    $("#div6").fadeOut(50);
 +
  });
 +
});
 +
 +
$(document).ready(function(){
 +
  $(".topleft7").mouseover(function(){
 +
$("#div7").fadeIn(50);
 +
});
 +
});
 +
$(document).ready(function(){
 +
  $(".topleft7").mouseout(function(){
 +
    $("#div7").fadeOut(50);
 +
  });
 +
});
 +
 +
 +
 +
    </script>
  
 
</head>
 
</head>
 
<body class="homepage">
 
<body class="homepage">
  
−
<button onclick="topFunction()" id="myBtn" title="回顶部">TOP</button>
 
  
−
<div id="page-wrapper" >
+
<div id="rr" >
  
  
Line 70: Line 241:
 
<nav id="nav">
 
<nav id="nav">
 
<ul>
 
<ul>
−
<li ><a href="https://2018.igem.org/Team:OUC-China">Main</a>
+
<li ><a href="https://2018.igem.org/Team:OUC-China">uMain</a>
 
</li>
 
</li>
 
<li>
 
<li>
Line 120: Line 291:
 
</nav>
 
</nav>
  
−
<!-- Banner -->
+
 
−
+
<!-- Banner -->
 
<img src="https://static.igem.org/mediawiki/2018/8/8e/T--OUC-China--home.png"alt="banner"width="100%">
 
<img src="https://static.igem.org/mediawiki/2018/8/8e/T--OUC-China--home.png"alt="banner"width="100%">
  
−
</div>
+
 
 +
 +
<div class="topleft1"> <a href="https://2018.igem.org/Team:OUC-China/Description">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/8/8a/T--OUC-China--hpro.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/b/be/T--OUC-China--hprob.png" width=370px>
 +
</a>  </div>
 +
<div id="div1" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/1/15/T--OUC-China--hprojj.png"alt="banner"width="103%">
 +
</div>
 +
 
 +
 +
<div class="topleft2"> <a href="https://2018.igem.org/Team:OUC-China/Experiments">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/d/d8/T--OUC-China--hlab.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/a/a1/T--OUC-China--hhhhh.png" width=370px>
 +
</a>  </div>
 +
<div id="div2" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/a/aa/T--OUC-China--hlabjj.png"alt="banner"width="103%">
 +
</div>
 +
 +
 +
<div class="topleft3"> <a href="https://2018.igem.org/Team:OUC-China/Model">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/e/e1/T--OUC-China--hmod.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/7/70/T--OUC-China--hmodb.png" width=370px>
 +
</a>  </div>
 +
<div id="div3" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/8/80/T--OUC-China--hmodsssssss.png"alt="banner"width="103%">
 +
</div>
 +
 +
<div class="topleft4"> <a href="https://2018.igem.org/Team:OUC-China/Parts">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/c/cc/T--OUC-China--hpart.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/0/0b/T--OUC-China--hpartb.png" width=370px>
 +
</a>  </div>
 +
<div id="div4" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/e/e1/T--OUC-China--partjj.png"alt="banner"width="103%">
 +
</div>
 +
 +
<div class="topleft5"> <a href="https://2018.igem.org/Team:OUC-China/Human_Practices">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/5/55/T--OUC-China--hhp.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/c/ce/T--OUC-China--hhpb.png" width=370px>
 +
</a>  </div>
 +
<div id="div5" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/9/96/T--OUC-China--hppppppp.png"alt="banner"width="103%">
 +
</div>
 +
 +
<div class="topleft6"> <a href="https://2018.igem.org/Team:OUC-China/Team">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/c/cb/T--OUC-China--hteam_.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/4/4e/T--OUC-China--hteamb_.png" width=370px>
 +
</a>  </div>
 +
<div id="div6" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/7/7b/T--OUC-China--ttttt.png"alt="banner"width="103%">
 +
</div>
 +
 +
<div class="topleft7"> <a href="https://2018.igem.org/Team:OUC-China/Notebook">
 +
<img class="media-object" src="https://static.igem.org/mediawiki/2018/1/18/T--OUC-China--ADSFA.png" width=370px>
 +
<img class="ouc-teammate" src="https://static.igem.org/mediawiki/2018/4/4f/T--OUC-China--hnoteb_.png" width=370px>
 +
</a>  </div>
 +
<div id="div7" style="width:50%;height:6%;display:none; ">
 +
<img src="https://static.igem.org/mediawiki/2018/2/26/T--OUC-China--teajjjm.png"alt="banner"width="103%">
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</div>
 
 
  
Line 149: Line 398:
 
 
  
−
<script>
+
 
−
// 当网页向下滑动 20px 出现"返回顶部" 按钮
+
−
window.onscroll = function() {scrollFunction()};
+
−
+
−
function scrollFunction() {console.log(121);
+
−
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+
−
        document.getElementById("myBtn").style.display = "block";
+
−
    } else {
+
−
        document.getElementById("myBtn").style.display = "none";
+
−
    }
+
−
}
+
−
+
−
// 点击按钮，返回顶部
+
−
function topFunction() {
+
−
    document.body.scrollTop = 0;
+
−
    document.documentElement.scrollTop = 0;
+
−
}
+
−
</script>
+
  
  

Revision as of 04:08, 16 October 2018

Team OUC-China: Main
Contact Us : oucigem@163.com | ©2018 OUC IGEM.All Rights Reserved. | …………