Difference between revisions of "Team:SCAU-China/Human Practices"

 
(35 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
 
−
<html lang="en">
 
  
−
<head>
+
<html>
−
    <meta charset="UTF-8">
+
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
−
    <title>SCAU-2018</title>
+
−
</head>
+
  
−
<body>
 
 
<style type="text/css">
 
<style type="text/css">
−
#top_title{
+
* {
−
display:none;
+
box-sizing: border-box;
 
}
 
}
−
* {
 
−
            box-sizing: border-box;
 
−
        }
 
  
−
        a {
+
a {
−
            text-decoration: none;
+
text-decoration: none;
−
        }
+
}
  
−
        ul,
+
ul,
−
        ol {
+
ol {
−
            list-style: none;
+
list-style: none;
−
        }
+
}
  
−
        body {
+
body {
−
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
width:100%;
−
            font-size: 14px;
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
−
            line-height: 1.42857143;
+
font-size: 14px;
−
            color: #333;
+
line-height: 1.42857143;
−
            min-width: 768px;
+
color: #333;
−
        }
+
min-width: 768px;
 +
}
  
−
        .navbar-default {
+
.navbar-default {
−
            background-color: #EEE;
+
background-color: #EEE;
−
            border-color: #e7e7e7;
+
border-color: #e7e7e7;
−
            top: 16px;
+
top: 16px;
−
            border-width: 0 0 1px;
+
border-width: 0 0 1px;
−
            position: fixed;
+
position: fixed;
−
            right: 0;
+
right: 0;
−
            left: 0;
+
left: 0;
−
            z-index: 1030;
+
z-index: 1030;
−
            min-height: 50px;
+
min-height: 50px;
−
            margin-bottom: 20px;
+
margin-bottom: 20px;
−
            border: 1px solid transparent;
+
border: 1px solid transparent;
−
            min-width: 768px;
+
min-width: 768px;
−
        }
+
}
  
−
        .container {
+
.container {
−
            padding-right: 15px;
+
padding-right: 15px;
−
            padding-left: 15px;
+
padding-left: 15px;
−
            margin-right: auto;
+
margin-right: auto;
−
            margin-left: auto;
+
margin-left: auto;
−
        }
+
}
  
−
        @media screen and (min-width: 768px) {
+
@media screen and (min-width: 768px) {
−
            .container {
+
.container {
−
                width: 750px;
+
width: 750px;
−
            }
+
}
−
        }
+
}
  
−
        @media screen and (min-width: 992px) {
+
@media screen and (min-width: 992px) {
−
            .container {
+
.container {
−
                width: 970px;
+
width: 970px;
−
            }
+
}
−
        }
+
}
  
−
        @media screen and (min-width: 1200px) {
+
@media screen and (min-width: 1200px) {
−
            .container {
+
.container {
−
                width: 1170px;
+
width: 1170px;
−
            }
+
}
−
        }
+
}
  
−
        .navbar-header {
+
.navbar-header {
−
            float: left;
+
float: left;
−
        }
+
}
  
−
        .navbar-brand {
+
.navbar-brand {
−
            color: #777;
+
color: #777;
−
            float: left;
+
float: left;
−
            height: 50px;
+
height: 50px;
−
            padding: 15px 15px;
+
padding: 15px 15px;
−
            font-size: 18px;
+
font-size: 18px;
−
            line-height: 20px;
+
line-height: 20px;
−
        }
+
}
  
−
        .navbar>ul>li {
+
.navbar>ul>li {
−
            float: left;
+
float: left;
−
        }
+
}
  
−
        .nav>li {
+
.nav>li {
−
            position: relative;
+
position: relative;
−
            display: block;
+
display: block;
−
            margin-right: 10px;
+
margin-right: 10px;
−
        }
+
}
  
−
        .nav>li>a {
+
.nav>li>a {
−
            color: #777;
+
color: #777;
−
            position: relative;
+
position: relative;
−
            display: block;
+
display: block;
−
            padding: 8px 15px;
+
padding: 8px 15px;
−
            cursor: pointer;
+
cursor: pointer;
−
        }
+
}
  
−
        .nav>li>a:hover {
+
.nav>li>a:hover {
−
            color: #333;
+
color: #333;
−
        }
+
}
  
−
        .caret {
+
.caret {
−
            display: inline-block;
+
display: inline-block;
−
            width: 0;
+
width: 0;
−
            height: 0;
+
height: 0;
−
            margin-left: 2px;
+
margin-left: 2px;
−
            vertical-align: middle;
+
vertical-align: middle;
−
            border-top: 4px solid #777;
+
border-top: 4px solid #777;
−
            border-right: 4px solid transparent;
+
border-right: 4px solid transparent;
−
            border-left: 4px solid transparent;
+
border-left: 4px solid transparent;
−
            position: absolute;
+
position: absolute;
−
            top: 18px;
+
top: 18px;
−
            right: 1px;
+
right: 1px;
−
        }
+
}
  
−
        .nav>li>a:hover+span {
+
.nav>li>a:hover+span {
−
            border-top: 4px solid #333;
+
border-top: 4px solid #333;
−
        }
+
}
  
−
        .nav>li .dropdown-menu {
+
.nav>li .dropdown-menu {
−
            margin-top: 0;
+
margin-top: 0;
−
            border-top-left-radius: 0;
+
border-top-left-radius: 0;
−
            border-top-right-radius: 0;
+
border-top-right-radius: 0;
−
            position: absolute;
+
position: absolute;
−
            top: 35px;
+
top: 35px;
−
            left: 0;
+
left: 0;
−
            z-index: 1000;
+
z-index: 1000;
−
            float: left;
+
float: left;
−
            min-width: 160px;
+
min-width: 160px;
−
            padding: 5px 0;
+
padding: 5px 0;
−
            margin: 2px 0 0;
+
margin: 2px 0 0;
−
            font-size: 14px;
+
font-size: 14px;
−
            text-align: left;
+
text-align: left;
−
            list-style: none;
+
list-style: none;
−
            background-color: #fff;
+
background-color: #fff;
−
            -webkit-background-clip: padding-box;
+
-webkit-background-clip: padding-box;
−
            background-clip: padding-box;
+
background-clip: padding-box;
−
            border: 1px solid #ccc;
+
border: 1px solid #ccc;
−
            border: 1px solid rgba(0, 0, 0, .15);
+
border: 1px solid rgba(0, 0, 0, .15);
−
            border-radius: 4px;
+
border-radius: 4px;
−
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
−
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
−
            display: none;
+
display: none;
−
        }
+
}
  
−
        .dropdown-menu>li {
+
.dropdown-menu>li {
−
            display: list-item;
+
display: list-item;
−
        }
+
}
  
−
        .dropdown-menu>li>a {
+
.dropdown-menu>li>a {
−
            display: block;
+
display: block;
−
            padding: 3px 20px;
+
padding: 3px 20px;
−
            clear: both;
+
clear: both;
−
            font-weight: normal;
+
font-weight: normal;
−
            line-height: 1.42857143;
+
line-height: 1.42857143;
−
            color: #333;
+
color: #333;
−
            white-space: nowrap;
+
white-space: nowrap;
−
        }
+
−
        .dropdown-menu>li>a:hover {
+
−
            background-color: #eee;
+
−
        }
+
−
html {
+
−
  font-family: sans-serif;
+
−
  -webkit-text-size-adjust: 100%;
+
−
      -ms-text-size-adjust: 100%;
+
 
}
 
}
−
#mainDiv{
+
.dropdown-menu>li>a:hover {
−
+
background-color: #eee;
−
  margin: 0;
+
−
  min-height: 2000px;
+
−
  padding-top: 70px;
+
−
  min-width: 1140px;
+
−
  background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') no-repeat center center;
+
 
}
 
}
−
.heart {
+
@font-face{
−
  width: 1140px;
+
font-family:'pinghei';
−
  margin: 0 auto;/* 通用的版心 */
+
src:url('https://static.igem.org/mediawiki/2018/5/5d/T--SCAU-China--pinghei.ttf') format('truetype'); /*导入字体文件*/
 
}
 
}
−
#mask {
+
 
−
    width: 100%;
+
body{
−
    height: 2800px;
+
margin:0px;
−
    background: rgba(0, 0, 0, 0.3);
+
width:1300px;
−
    margin-top: -15px;
+
height:100%;
−
    padding-top: 15px;
+
 
 
}
 
}
−
.DBoard {/* 展板样式 */
+
 
−
    margin: 0px auto 40px auto;
+
#head1{
−
    width: 1000px;
+
position: relative;
−
    height: 500px;
+
top:-120px;
−
    border-radius: 3px;
+
width: 100%;
−
    background-color: #fff;
+
height:100%;
−
    overflow: hidden;
+
 
−
    position: relative;
+
 
}
 
}
−
.DBoard0 {/*文字样式*/
+
.navbar-fixed-top {
−
    margin: 0px auto 40px auto;
+
top: 20px;
−
    width: 1000px;
+
border-width: 0 0 1px;
−
    height: 500px;
+
−
    border-radius: 3px;
+
−
    color: white;
+
−
    overflow: hidden;
+
−
    position: relative;
+
 
}
 
}
−
#mask p {
+
#Title{
−
    color: #fff;
+
width: 400px;
−
    text-align: center;
+
position: relative;
 +
left: 40%;
 +
margin-top: -38%;
 +
font-family: 'pinghei';
 +
font-size: 50px;
 +
color: white;
 
}
 
}
−
#lists-DB {
+
#Title1{
−
    cursor: pointer;
+
 
 +
position: relative;
 +
width: 400px;
 +
left: 37%;
 +
margin-top: -1%;
 +
font-family: 'pinghei';
 +
font-size: 40px;
 +
color: white;
 
}
 
}
−
#lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
+
#Title2{
−
    display: block;
+
position: relative;
 +
width: 400px;
 +
left: 39%;
 +
margin-top: -1%;
 +
font-family: 'pinghei';
 +
font-size: 40px;
 +
color: white;
 
}
 
}
−
#lists {
+
 
−
    position: relative;
+
#img1{
−
    width: 4000px;
+
position: relative;
 +
float: right;
 +
margin-top:20%;
 +
width: 60%;
 +
height:60%;
 
}
 
}
−
#lists img {
+
#d1-t{
−
    float: left;
+
position: relative; width: 600px;/*一定要限制字的宽度 否则滚动条会出问题*/
 +
margin-top:35%;
 +
font-family: 'pinghei';
 +
font-size: 60px;
 +
color: black;
 +
left: 13%;
 
}
 
}
−
#arr-l,#arr-r {
+
#d1-t1{
−
    display: block;
+
position: relative; width: 600px;
−
    position: absolute;
+
margin-top:2%;
−
    width: 40px;
+
font-family: 'pinghei';
−
    height: 60px;
+
font-size: 25px;
−
    background: rgba(0, 0, 0, .4);
+
color: black;
−
    top: 50%;
+
left:5%;
−
    margin-top: -30px;
+
−
    color: #fff;
+
−
    font: 600 30px/60px "宋体";
+
−
    line-height: 60px;
+
−
    text-align: center;
+
−
    display: none;
+
 
}
 
}
−
#arr-l:hover,#arr-r:hover {
+
#d1-t2{
−
    background: rgba(0, 0, 0, .7);
+
position: relative; width: 600px;
 +
margin-top:0%;
 +
font-family: 'pinghei';
 +
font-size: 25px;
 +
color: black;
 +
left: 5%;
 
}
 
}
−
#arr-l {
+
 
−
    left: 0;
+
#img2{
 +
position: relative;
 +
 
 +
margin-top:0%;
 +
width: 100%;
 +
height:100%;
 
}
 
}
−
#arr-r {
+
/*按钮*/
−
    right: 0;
+
#d2-t2{
 +
position: relative; width: 130px;
 +
 
 +
margin-top:0%;
 +
margin-left: auto;
 +
margin-right: auto;
 +
left: 0px;
 
}
 
}
−
#buttons {
+
#ha{
−
    position: absolute;
+
 
−
    bottom: 15px;
+
width: 150px;
−
    left: 50%;
+
height: 65px;
 +
 
 +
margin-top: 20px;
 +
font-family:微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
 +
font-size:16px;
 +
color: white;
 +
 
 +
top: 20px;
 +
position: absolute;
 +
text-decoration:none; /*超链接无下划线*/
 +
border-style:solid;
 +
border-width:2px;
 +
border-bottom-color:white ;
 +
border-left-color:white ;/*设置左边框颜色为黑色*/
 +
border-right-color:white ;/*设置右边框颜色为黑色*/
 +
border-top-color:white ;
 +
border-radius: 5px;
 +
 
 +
text-align:center;
 +
line-height:60px;
 +
 
 +
-webkit-transition:all linear 0.30s;
 +
-moz-transition:all linear 0.30s;
 +
transition:all linear 0.30s;  
 
}
 
}
−
#buttons span {
+
#d2-t2 a:hover { background:white;color: #1BBC9B; }
−
    width: 12px;
+
#d2-t{
−
    height: 12px;
+
position: relative;  
−
    background: #ccc;
+
margin-top:-23%;
−
    float: left;
+
font-family: Arial,Helvetica,sans-serif,SimSun;
−
    border-radius: 50%;
+
font-size: 60px;
−
    margin: 0 5px 0 5px;
+
color: white;
 +
margin-left: auto;
 +
margin-right: auto;
 +
text-align: center;
 
}
 
}
−
.on {
+
#d2-t1{
−
    background-color: #333 !important;
+
position: relative;  
−
}
+
margin-top:2%;
−
#toTop {
+
font-family: Arial,Helvetica,sans-serif,SimSun;;
−
    width: 50px;
+
font-size: 50px;
−
    height: 50px;
+
color: white;
−
    background: url("https://static.igem.org/mediawiki/2018/b/b6/T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
+
margin-left: auto;
−
    position: fixed;
+
margin-right: auto;
−
    right: 50px;
+
text-align: center;
−
    bottom: 5px;
+
−
    cursor: pointer;
+
−
    display: none;
+
 
}
 
}
  
−
   
+
 
−
}
+
 
−
#img4{
+
 
−
    width: 10%;
+
−
}
+
 
#content {
 
#content {
−
    width: 101%;
+
width: 101%;
−
    padding: 15px;
+
padding: 15px;
−
    border: none;
+
border: none;
−
    color: black;
+
color: black;
−
    margin-left: 20px;
+
margin-left: 20px;
−
    margin-right: auto;
+
margin-right: auto;
−
    background-color: #ffffff;
+
background-color: #ffffff;
−
    position: relative;
+
position: relative;
 
}
 
}
 
#content {
 
#content {
−
    position: relative;
+
position: relative;
−
    width: 101%;
+
width: 101%;
−
    margin: 0 auto;
+
margin: 0 auto;
−
    padding: 5px 5px 5px 5px;
+
padding: 5px 5px 5px 5px;
−
    background: white;
+
background: white;
−
    color: black;
+
color: black;
−
    border-left: 1px solid #444444;
+
border-left: 1px solid #444444;
−
    border-right: 1px solid #444444;
+
border-right: 1px solid #444444;
−
    line-height: 1.5em;
+
line-height: 1.5em;
−
    z-index: 2;
+
z-index: 2;
 +
}
 +
 
 +
#d2 {
 +
height: 600px;
 
}
 
}
 
body {
 
body {
−
    background-color: white;
+
background-color:white;
 +
 
 +
    margin: 0px;
 +
    width: 100%;
 +
    height: 100%;
 +
 
 +
}
 +
#top_title{
 +
display:none;
 
}
 
}
 
</style>
 
</style>
−
<div class="navbar-default">
 
−
        <div class="container">
 
−
            <div class="navbar-header">
 
−
                <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
 
−
            </div>
 
−
            <div class="navbar">
 
−
                <ul style="float: left;" class="nav">
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">TEAM</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                            <li>
 
−
                                <a href="#">Time shaft</a>
 
−
                            </li>
 
−
                            <li>
 
−
                                <a href="#">Members</a>
 
−
                            </li>
 
−
                            <li>
 
−
                                <a href="#">Advisors</a>
 
−
                            </li>
 
−
                            <li>
 
−
                                <a href="#">Teachers</a>
 
−
                            </li>
 
−
                            <li>
 
−
                                <a href="#">Attributions</a>
 
−
                            </li>
 
−
                            <li>
 
−
                                <a href="#">Collaborations</a>
 
−
                            </li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">PROJECT</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                            <li><a href="#">Description</a></li>
 
−
                            <li><a href="#">Design</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">PART</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                            <li><a href="#">Basic parts</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">RESULT</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                            <li><a href="#">Experiments</a></li>
 
−
                            <li><a href="#">Proof</a></li>
 
−
                            <li><a href="#">Demonstrate</a></li>
 
−
                            <li><a href="#">Model</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">NOTE</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                          <li><a href="#">NoteBook</a></li>
 
−
                          <li><a href="#">Gallery</a></li>
 
−
                          <li><a href="#">Protocol</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                </ul>
 
−
                <ul style="float: right;" class="nav">
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">SAFETY</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                            <li><a href="#">Safety</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li class="dropdown">
 
−
                        <a href="javascript:void(0)">HUMAN PRACTICES</a>
 
−
                        <span class="caret"></span>
 
−
                        <ul class='dropdown-menu'>
 
−
                            <li><a href="#">Integrated</a></li>
 
−
                            <li><a href="#">Engagement</a></li>
 
−
                            <li><a href="#">Entrepreneurship</a></li>
 
−
                            <li><a href="#"></a></li>
 
−
                            <li><a href="#"></a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                </ul>
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
  
  
 +
<div class="Tan MingYang"></div>
 +
<div class="Li JiaDong"></div>
 +
<div class="Huang XinLing"></div>
 +
<div class="Fan ZhongZhao"></div>
  
−
<div id="mainDiv">
+
<div class="navbar-default">
−
<div class="heart"><!-- 版心 -->
+
<div class="container">
−
    <div id="mask"><!-- 半透明底板 -->
+
<div class="navbar-header">
−
      <div class="DBoard" id="lists-DB"><!-- 展板 -->  <!-- 轮播图部分 -->
+
<a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
−
        <div id="lists" style="left:-1000px;">
+
−
          <img src="img/image2.png" alt="">
+
−
          <img src="img/image1.png" alt="">
+
−
          <img src="img/image2.png" alt="">
+
−
          <img src="img/image1.png" alt="">
+
−
        </div>
+
−
        <div id="arrow"> <!-- 左右按钮 -->
+
−
          <a href="javascript:;" id="arr-l"><</a>
+
−
          <a href="javascript:;" id="arr-r">></a>
+
−
        </div>
+
−
        <div id="buttons"> <!-- 小圆点 -->
+
−
        </div>
+
−
      </div>
+
−
      <div class="DBoard"><!-- 展板 -->
+
−
      </div>
+
−
      <div class="DBoard"><!-- 展板 -->
+
−
      </div>
+
−
      <div class="DBoard"><!-- 展板 -->
+
−
      </div>
+
−
      <div class="DBoard"><!-- 展板 -->
+
−
      </div>
+
−
      <p>School's name:</p>
+
−
      <p>Member's name:</p>
+
−
      <p>Designed by:</p>
+
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
−
  <!-- 回到顶部按钮 -->
+
<div class="navbar">
−
  <em id="toTop"></em>
+
<ul style="float: left;" class="nav">
 +
<li class="dropdown">
 +
<a href="javascript:void(0)">TEAM</a>
 +
<span class="caret"></span>
 +
<ul class='dropdown-menu'>
 +
<li>
 +
<a href="https://2018.igem.org/Team:SCAU-China/Members">Members</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:SCAU-China/Attributions">Attributions</a>
 +
</li>
  
−
<script>
+
</ul>
−
        var dropdownBoxs = document.getElementsByClassName('dropdown');
+
</li>
−
        var dropdownMenus = document.getElementsByClassName('dropdown-menu');
+
<li class="dropdown">
−
        for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
+
<a href="javascript:void(0)">PROJECT</a>
−
            // console.log(dropdownBoxs[i]);
+
<span class="caret"></span>
−
            // console.log(dropdownMenus[i]);
+
<ul class='dropdown-menu'>
−
            dropdownBoxs[i].index = i;
+
<li><a href="https://2018.igem.org/Team:SCAU-China/ProjectOverview">Overview</a></li>
−
            dropdownBoxs[i].onclick = function () {
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Background">Background</a></li>
−
                var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Design">Design</a></li>
−
                // console.log(styles.display);
+
<li><a href="https://2018.igem.org/Team:SCAU-China/SRK">Synergistic Recombination Kit</a></li>
−
                if (styles.display == 'none') {
+
<li><a href="https://2018.igem.org/Team:SCAU-China/MM">Mathematical Model of Biological Intrinsic Regulation System</a></li>
−
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Type">Type II CRISPR/Cas 9 Kit</a></li>
−
                        dropdownMenus[j].style.display = 'none';
+
<li><a href="https://2018.igem.org/Team:SCAU-China/MOM">Method for Optimizing Microbial Cell Culture</a></li>
−
                        dropdownMenus[i].style.display = 'block';
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Outlook">Outlook</a></li>
−
                    }
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Demonstrate">Demonstrate</a></li>
−
                } else {
+
−
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
+
−
                        dropdownMenus[j].style.display = 'none';
+
−
                    }
+
−
                }
+
−
            }
+
−
        }
+
−
    </script>
+
  
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a href="javascript:void(0)">LAB WORK</a>
 +
<span class="caret"></span>
 +
<ul class='dropdown-menu'>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Experiments">Experiments</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Parts">Parts</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Improve">Improve</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/InterLab">Interlab</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Measurement">Measurement</a></li>
 +
</ul>
 +
</li>
  
−
    <script type="text/javascript">
+
<li class="dropdown">
−
 
+
<a href="javascript:void(0)">MODEL</a>
−
      var a= function() {
+
<span class="caret"></span>
−
    var box01 = document.getElementById("lists-DB");
+
<ul class='dropdown-menu'>
−
    var lis = document.getElementById("lists");//获得轮播图图片盒子
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Model">Overview</a></li>
−
    var btns = document.getElementById("buttons");//获得按钮盒子
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Model/HAWNA">HAWNA</a></li>
−
    var imgs = lis.getElementsByTagName("img");//获得图片伪数组
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Model/PPIBoost">PPIBoost</a></li>
−
    btns.style.width = 24 * (imgs.length - 2) + "px";
+
<li><a href="https://2018.igem.org/Team:SCAU-China/Model/CultrueCondition">Cultrue Condition</a></li>
−
    btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
+
</ul>
−
    for(var i = 0;i < imgs.length - 2; i++){
+
</li>
−
        //动态生成小圆点
+
−
        var span = document.createElement("span");
+
−
        btns.appendChild(span);
+
−
    }
+
  
 +
</ul>
 +
<ul style="float: right;" class="nav">
 +
<li class="dropdown">
 +
<a href="javascript:void(0)">SAFETY</a>
 +
<span class="caret"></span>
 +
<ul class='dropdown-menu'>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a href="javascript:void(0)">HUMAN PRACTICES</a>
 +
<span class="caret"></span>
 +
<ul class='dropdown-menu'>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Human_Practices">Overview</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/silver">Silver</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Integrated">Integrated</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Public_Engagement">Public Engagement & Education</a></li>
 +
<li><a href="https://2018.igem.org/Team:SCAU-China/Collaborations">Collaborations</a></li>
  
−
    //轮播图正式部分
+
</ul>
−
    var prev = document.getElementById("arr-l");
+
</li>
−
    var next = document.getElementById("arr-r");
+
</ul>
−
    var animated = false;//防止计时器多次被触发变量
+
</div>
 +
</div>
 +
</div>
  
−
    function animate(offset) {
+
<div id="d2">
−
        var time = 300;//滚动一张图片总用时
+
<img src="https://static.igem.org/mediawiki/2018/d/d9/T--SCAU-CHINA--overview4.jpg" id="img2">
−
        var inteval = 10;//滚动一次的间隔时间
+
−
        var speed = offset / (time / inteval);//每次滚动滑动的像素
+
−
        var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
+
−
        function go() {
+
−
            animated = true;//为true代表正在运行
+
−
            //滑动函数
+
−
            if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
+
−
                lis.style.left = parseInt(lis.style.left) + speed + "px";
+
−
                setTimeout(go,inteval);//设置计时器
+
−
            }
+
−
            else {
+
−
                lis.style.left = left + "px";
+
−
                if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
+
−
                if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
+
−
                animated = false;//结束运行
+
−
            }
+
−
        }
+
−
        go();//调用函数
+
−
       
+
−
    }
+
−
    prev.onclick = function() {
+
−
        if(animated) return;//正在轮播停止
+
−
        if(index == 0) index = spans.length - 1;
+
−
        else index --;
+
−
        animate(1000);
+
−
        showButton();
+
−
    }
+
−
    next.onclick = function() {
+
−
        if(animated) return;
+
−
        if(index == spans.length - 1) index = 0;
+
−
        else index ++;
+
−
        animate(-1000);
+
−
        showButton();
+
−
    }
+
−
    var index = 0;//记录现在className为on的按钮
+
  
−
    var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
+
<div id="d2-t">Silver </div>
−
    spans[0].className = "on";
+
−
    for(var i = 0;i < spans.length;i ++ ) {
+
−
        spans[i].index = i;//自定义属性
+
−
        spans[i].onclick = function() {
+
−
            if(animated) return;
+
−
            if(this.className == "on") return;
+
−
            animate((index - this.index) * 1000);
+
−
            index = this.index;
+
−
            showButton();
+
−
        }
+
−
    }
+
  
−
    function showButton() { //显示按钮运动的函数
 
−
        for(var j = 0;j < spans.length;j ++) {//排它思想
 
−
                //if(spans[j].className == "on") oldIndex = j;
 
−
                spans[j].className = "";
 
−
                spans[index].className = "on";
 
−
        }
 
−
    }
 
  
−
    var timer;//计时器变量 , 这里为什么不能为null
+
<div id="d2-t2">
−
    var interval = 3000;//点击间隔时间
+
<a id="ha" href="https://2018.igem.org/Team:SCAU-China/silver">Learn more</a>
 +
</div>
 +
</div>
  
−
    function play() {//自动点击next函数
 
−
        timer = setTimeout(function(){
 
−
            next.onclick();//自动点击next
 
−
            play();//递归调用
 
−
        },interval);
 
−
    }
 
  
−
    function stop() {
 
−
        //停止函数
 
−
        clearTimeout(timer);
 
−
    }
 
  
 +
<div id="d2">
 +
<img src="https://static.igem.org/mediawiki/2018/5/55/T--SCAU-CHINA--overview2.jpg" id="img2">
 +
<div id="d2-t">Integrated </div>
  
−
    box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
 
−
    box01.onmouseout = play;//鼠标离开轮播图继续
 
−
    play();//先自己调用一次
 
−
}
 
−
a();
 
−
  </script>
 
−
    <script type="text/javascript">
 
−
            //封装函数js文件，方便调用
 
−
    function $(id) {return document.getElementById(id);}//封装获取id对象函数
 
−
    function show(obj) {obj.style.display = "block";}//封装显示函数
 
−
    function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
 
−
    function scroll(){
 
−
        if(window.pageYOffset != null) {
 
−
            //ie9+ 和 其他浏览器
 
−
            return {
 
−
                top: window.pageYOffset,
 
−
                left: window.pageXOffset
 
−
            }
 
−
        }
 
−
        else if(document.compatMode == "CSS1Compat") {
 
−
            //非怪异浏览器：没有头部的
 
−
            return {
 
−
                top: document.documentElement.scrollTop,
 
−
                left: document.documentElement.scrollLeft
 
−
            }
 
−
        }
 
−
        return {//剩下的全部都是怪异浏览器
 
−
            top: document.body.scrollTop,
 
−
            left: document.body.scrollLeft
 
−
        }
 
−
    }
 
  
−
    var leader = 0,target = 0,timer = null;//计时器变量
 
−
    window.onscroll = function() {
 
−
        //滚动时执行的函数
 
−
        scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
 
−
        leader = scroll().top; //实时记录滚动距离
 
−
    }
 
  
−
    $("toTop").onclick = function() {
+
<div id="d2-t2">
−
        //toTop被点击时执行的函数
+
<a id="ha" href="https://2018.igem.org/Team:SCAU-China/Integrated">Learn more</a>
−
        target = 0;
+
</div>
−
        timer = setInterval(function() {
+
</div>
−
            leader = leader + (target - leader) / 10;
+
−
            window.scrollTo(0,leader);
+
−
            if(leader == target) clearInterval(timer);//当到达顶端清除计时器
+
−
            //必须写在里面,因为在计时器执行时判断
+
−
        },20);
+
−
    }
+
  
−
    </script>
+
<div id="d2">
 +
<img src="https://static.igem.org/mediawiki/2018/9/91/T--SCAU-CHINA--overview3.jpg" id="img2">
 +
<div id="d2-t"></div>
 +
<div id="d2-t1">Public Engagement & Education</div>
  
 +
<div id="d2-t2">
 +
<a id="ha" href="https://2018.igem.org/Team:SCAU-China/Engagement">Learn more</a>
 +
</div>
 +
</div>
  
 +
<div id="d2">
 +
<img src="https://static.igem.org/mediawiki/2018/e/e7/T--SCAU-CHINA--overview1.jpg" id="img2">
 +
<div id="d2-t">Collaborations </div>
  
−
</html>
+
<div id="d2-t2">
 +
<a id="ha" href="https://2018.igem.org/Team:SCAU-China/Collaborations">Learn more</a>
 +
</div>
 +
</div>
  
  
−
</body>
+
<script>
−
 
+
var dropdownBoxs = document.getElementsByClassName('dropdown');
 +
var dropdownMenus = document.getElementsByClassName('dropdown-menu');
 +
for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
 +
// console.log(dropdownBoxs[i]);
 +
// console.log(dropdownMenus[i]);
 +
dropdownBoxs[i].index = i;
 +
dropdownBoxs[i].onclick = function () {
 +
var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
 +
// console.log(styles.display);
 +
if (styles.display == 'none') {
 +
for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
 +
dropdownMenus[j].style.display = 'none';
 +
dropdownMenus[i].style.display = 'block';
 +
}
 +
} else {
 +
for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
 +
dropdownMenus[j].style.display = 'none';
 +
}
 +
}
 +
}
 +
}
 +
</script>
 
</html>
 
</html>

Latest revision as of 12:24, 17 October 2018

SCAU-2018
Silver
Integrated
Public Engagement & Education
Collaborations