Difference between revisions of "Team:SCAU-China/Improve"

(Replaced content with "coming soon")
Line 1: Line 1:
−
coming soon
+
<html>
 +
 +
<style type="text/css">
 +
#top_title{
 +
display:none;
 +
}
 +
* {
 +
            box-sizing: border-box;
 +
        }
 +
 
 +
        a {
 +
            text-decoration: none;
 +
        }
 +
 
 +
        ul,
 +
        ol {
 +
            list-style: none;
 +
        }
 +
 
 +
        body {
 +
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
            font-size: 14px;
 +
            line-height: 1.42857143;
 +
            color: #333;
 +
            min-width: 768px;
 +
        }
 +
 
 +
        .navbar-default {
 +
            background-color: #EEE;
 +
            border-color: #e7e7e7;
 +
            top: 16px;
 +
            border-width: 0 0 1px;
 +
            position: fixed;
 +
            right: 0;
 +
            left: 0;
 +
            z-index: 1030;
 +
            min-height: 50px;
 +
            margin-bottom: 20px;
 +
            border: 1px solid transparent;
 +
            min-width: 768px;
 +
        }
 +
 
 +
        .container {
 +
            padding-right: 15px;
 +
            padding-left: 15px;
 +
            margin-right: auto;
 +
            margin-left: auto;
 +
        }
 +
 
 +
        @media screen and (min-width: 768px) {
 +
            .container {
 +
                width: 750px;
 +
            }
 +
        }
 +
 
 +
        @media screen and (min-width: 992px) {
 +
            .container {
 +
                width: 970px;
 +
            }
 +
        }
 +
 
 +
        @media screen and (min-width: 1200px) {
 +
            .container {
 +
                width: 1170px;
 +
            }
 +
        }
 +
 
 +
        .navbar-header {
 +
            float: left;
 +
        }
 +
 
 +
        .navbar-brand {
 +
            color: #777;
 +
            float: left;
 +
            height: 50px;
 +
            padding: 15px 15px;
 +
            font-size: 18px;
 +
            line-height: 20px;
 +
        }
 +
 
 +
        .navbar>ul>li {
 +
            float: left;
 +
        }
 +
 
 +
        .nav>li {
 +
            position: relative;
 +
            display: block;
 +
            margin-right: 10px;
 +
        }
 +
 
 +
        .nav>li>a {
 +
            color: #777;
 +
            position: relative;
 +
            display: block;
 +
            padding: 8px 15px;
 +
            cursor: pointer;
 +
        }
 +
 
 +
        .nav>li>a:hover {
 +
            color: #333;
 +
        }
 +
 
 +
        .caret {
 +
            display: inline-block;
 +
            width: 0;
 +
            height: 0;
 +
            margin-left: 2px;
 +
            vertical-align: middle;
 +
            border-top: 4px solid #777;
 +
            border-right: 4px solid transparent;
 +
            border-left: 4px solid transparent;
 +
            position: absolute;
 +
            top: 18px;
 +
            right: 1px;
 +
        }
 +
 
 +
        .nav>li>a:hover+span {
 +
            border-top: 4px solid #333;
 +
        }
 +
 
 +
        .nav>li .dropdown-menu {
 +
            margin-top: 0;
 +
            border-top-left-radius: 0;
 +
            border-top-right-radius: 0;
 +
            position: absolute;
 +
            top: 35px;
 +
            left: 0;
 +
            z-index: 1000;
 +
            float: left;
 +
            min-width: 160px;
 +
            padding: 5px 0;
 +
            margin: 2px 0 0;
 +
            font-size: 14px;
 +
            text-align: left;
 +
            list-style: none;
 +
            background-color: #fff;
 +
            -webkit-background-clip: padding-box;
 +
            background-clip: padding-box;
 +
            border: 1px solid #ccc;
 +
            border: 1px solid rgba(0, 0, 0, .15);
 +
            border-radius: 4px;
 +
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
            display: none;
 +
        }
 +
 
 +
        .dropdown-menu>li {
 +
            display: list-item;
 +
        }
 +
 
 +
        .dropdown-menu>li>a {
 +
            display: block;
 +
            padding: 3px 20px;
 +
            clear: both;
 +
            font-weight: normal;
 +
            line-height: 1.42857143;
 +
            color: #333;
 +
            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{
 +
 +
  margin: 0;
 +
  height: 350px;
 +
  padding-top: 70px;
 +
  min-width: 1140px;
 +
  background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg')  center center;
 +
}
 +
.heart {
 +
  width: 1140px;
 +
  margin: 0 auto;/* 通用的版心 */
 +
}
 +
#mask {
 +
    width: 100%;
 +
    height: 300px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    margin-top: -15px;
 +
    padding-top: 15px;
 +
}
 +
.DBoard {/* 展板样式 */
 +
    margin: 0px auto 40px auto;
 +
    width: 1000px;
 +
    height: 500px;
 +
    border-radius: 3px;
 +
    background-color: #fff;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
.DBoard0 {/*文字样式*/
 +
    margin: 0px auto 40px auto;
 +
    width: 1000px;
 +
    height: 500px;
 +
    border-radius: 3px;
 +
    color: white;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
#mask p {
 +
    color: #fff;
 +
    text-align: center;
 +
}
 +
#lists-DB {
 +
    cursor: pointer;
 +
}
 +
#lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
 +
    display: block;
 +
}
 +
#lists {
 +
    position: relative;
 +
    width: 4000px;
 +
}
 +
#lists img {
 +
    float: left;
 +
}
 +
#arr-l,#arr-r {
 +
    display: block;
 +
    position: absolute;
 +
    width: 40px;
 +
    height: 60px;
 +
    background: rgba(0, 0, 0, .4);
 +
    top: 50%;
 +
    margin-top: -30px;
 +
    color: #fff;
 +
    font: 600 30px/60px "宋体";
 +
    line-height: 60px;
 +
    text-align: center;
 +
    display: none;
 +
}
 +
#arr-l:hover,#arr-r:hover {
 +
    background: rgba(0, 0, 0, .7);
 +
}
 +
#arr-l {
 +
    left: 0;
 +
}
 +
#arr-r {
 +
    right: 0;
 +
}
 +
#buttons {
 +
    position: absolute;
 +
    bottom: 15px;
 +
    left: 50%;
 +
}
 +
#buttons span {
 +
    width: 12px;
 +
    height: 12px;
 +
    background: #ccc;
 +
    float: left;
 +
    border-radius: 50%;
 +
    margin: 0 5px 0 5px;
 +
}
 +
.on {
 +
    background-color: #333 !important;
 +
}
 +
#toTop {
 +
    width: 50px;
 +
    height: 50px;
 +
    background: url("https://static.igem.org/mediawiki/2018/b/b6/T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
 +
    position: fixed;
 +
    right: 50px;
 +
    bottom: 5px;
 +
    cursor: pointer;
 +
    display: none;
 +
}
 +
 
 +
   
 +
}
 +
#img4{
 +
    width: 10%;
 +
}
 +
#content {
 +
    width: 101%;
 +
    padding: 15px;
 +
    border: none;
 +
    color: black;
 +
    margin-left: 20px;
 +
    margin-right: auto;
 +
    background-color: #ffffff;
 +
    position: relative;
 +
}
 +
#content {
 +
    position: relative;
 +
    width: 101%;
 +
    margin: 0 auto;
 +
    padding: 5px 5px 5px 5px;
 +
    background: white;
 +
    color: black;
 +
    border-left: 1px solid #444444;
 +
    border-right: 1px solid #444444;
 +
    line-height: 1.5em;
 +
    z-index: 2;
 +
}
 +
#title{
 +
    height: 100px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    text-align: left;
 +
    font-size: 60px;
 +
    color: white;
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    line-height: 100px;
 +
 
 +
}
 +
#article1{
 +
    background: rgba(0, 0, 0, 0);
 +
height: 1710px;
 +
 
 +
}
 +
#article1 p{
 +
 
 +
    text-align: left;
 +
    position: relative;
 +
    color: white;
 +
    margin-top: 20px;
 +
   
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    font-size:20px;
 +
}
 +
 
 +
#article2{
 +
    background: url('https://static.igem.org/mediawiki/2018/9/9e/T--SCAU-CHINA--Description.png') no-repeat center center;
 +
    height:400px;
 +
}#title1{
 +
    height: 50px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    text-align: left;
 +
    font-size:30px;
 +
    color: white;
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    line-height: 50px;
 +
}
 +
 
 +
#title2{
 +
    height: 50px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    text-align: left;
 +
    font-size:30px;
 +
    color: white;
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    line-height: 50px;
 +
}
 +
#art1{
 +
background: rgba(0, 0, 0, 0);
 +
    height: 300px;
 +
}
 +
#art2{
 +
background: rgba(0, 0, 0, 0);
 +
    height: 200px;
 +
}
 +
#art1 p{
 +
text-align: left;
 +
    position: relative;
 +
    color: white;
 +
    margin-top: 0px;
 +
   
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    font-size:20px;
 +
}
 +
#art2 p{
 +
    text-align: left;
 +
    position: relative;
 +
    color: white;
 +
    margin-top:0px;
 +
   
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    font-size:20px;
 +
}
 +
body {
 +
    background-color: white;
 +
}
 +
</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>
 +
                            <li><a href="https://2018.igem.org/Team:SCAU-China/interlab">interlab</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="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="#">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 id="mainDiv">
 +
<div class="heart"><!-- 版心 -->
 +
    <div id="mask"><!-- 半透明底板 -->
 +
     
 +
      <div class="DBoard" id="title">   
 +
      coming soon     </div>
 +
     
 +
 
 +
   
 +
      <p>School's name:SCAU</p>
 +
      <p>Member's name:SCAU</p>
 +
      <p>Designed by:SCAU</p>
 +
    </div>
 +
  </div>
 +
</div>
 +
  <!-- 回到顶部按钮 -->
 +
  <em id="toTop"></em>
 +
 
 +
<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>
 +
 
 +
 
 +
    <script type="text/javascript">
 +
 
 +
      var a= function() {
 +
    var box01 = document.getElementById("lists-DB");
 +
    var lis = document.getElementById("lists");//获得轮播图图片盒子
 +
    var btns = document.getElementById("buttons");//获得按钮盒子
 +
    var imgs = lis.getElementsByTagName("img");//获得图片伪数组
 +
    btns.style.width = 24 * (imgs.length - 2) + "px";
 +
    btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
 +
    for(var i = 0;i < imgs.length - 2; i++){
 +
        //动态生成小圆点
 +
        var span = document.createElement("span");
 +
        btns.appendChild(span);
 +
    }
 +
 
 +
 
 +
    //轮播图正式部分
 +
    var prev = document.getElementById("arr-l");
 +
    var next = document.getElementById("arr-r");
 +
    var animated = false;//防止计时器多次被触发变量
 +
 
 +
    function animate(offset) {
 +
        var time = 300;//滚动一张图片总用时
 +
        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标签
 +
    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
 +
    var interval = 3000;//点击间隔时间
 +
 
 +
    function play() {//自动点击next函数
 +
        timer = setTimeout(function(){
 +
            next.onclick();//自动点击next
 +
            play();//递归调用
 +
        },interval);
 +
    }
 +
 
 +
    function stop() {
 +
        //停止函数
 +
        clearTimeout(timer);
 +
    }
 +
 
 +
 
 +
    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() {
 +
        //toTop被点击时执行的函数
 +
        target = 0;
 +
        timer = setInterval(function() {
 +
            leader = leader + (target - leader) / 10;
 +
            window.scrollTo(0,leader);
 +
            if(leader == target) clearInterval(timer);//当到达顶端清除计时器
 +
            //必须写在里面,因为在计时器执行时判断
 +
        },20);
 +
    }
 +
 
 +
    </script>
 +
 
 +
 
 +
</html>

Revision as of 02:05, 10 October 2018

SCAU-2018
coming soon

School's name:SCAU

Member's name:SCAU

Designed by:SCAU