Difference between revisions of "Team:HZAU-China/Results"

(Prototype team page)
 
Line 1: Line 1:
−
{{HZAU-China}}
+
{{HZAU-China/Bootstrap}}
 
<html>
 
<html>
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 +
    <link href="bootstrap.min.css" rel="stylesheet">
 +
    <!-- 导航栏CSS -->
 +
    <style type="text/css">
 +
        #sideMenu,
 +
        #top_title,
 +
        #team_submenu {
 +
            display: none;
 +
        }
  
−
<div class="column full_size">
+
        #HQ_page p {
−
<h1>Results</h1>
+
            margin: 0 !important;
−
<p>Here you can describe the results of your project and your future plans. </p>
+
        }
−
</div>
+
  
 +
        #content {
 +
            padding: 0px;
 +
            width: 100%;
 +
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
−
<div class="column third_size" >
+
        #bodyContent h1,
 +
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
−
<h3>What should this page contain?</h3>
+
        #team_name {
−
<ul>
+
            display: none
−
<li> Clearly and objectively describe the results of your work.</li>
+
        }
−
<li> Future plans for the project. </li>
+
−
<li> Considerations for replicating the experiments. </li>
+
−
</ul>
+
−
</div>
+
  
 +
        .global_wrapper {
 +
            padding: 0px 0px 0px 0px;
 +
        }
  
 +
        #top_menu_14 {
 +
            height: 16px;
 +
        }
  
 +
        * {
 +
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            list-style-type: none;
 +
            text-decoration: none !important;
 +
        }
  
−
<div class="column two_thirds_size" >
+
        body {
−
<h3>Describe what your results mean </h3>
+
            margin: 0;
−
<ul>
+
            padding: 0;
−
<li> Interpretation of the results obtained during your project. Don't just show a plot/figure/graph/other, tell us what you think the data means. This is an important part of your project that the judges will look for. </li>
+
            background-color: #F3F3F3;
−
<li> Show data, but remember all measurement and characterization data must be on part pages in the Registry. </li>
+
            font-size: 16px;
−
<li> Consider including an analysis summary section to discuss what your results mean. Judges like to read what you think your data means, beyond all the data you have acquired during your project. </li>
+
            font-family: Arial, Verdana, Sans-serif;
−
</ul>
+
            letter-spacing: 0;
−
</div>
+
            color: #FFFFFF;
 +
        }
  
 +
        .daohang {
 +
            background-color: #323643;
 +
            position: relative;
 +
            color: #ffffff;
 +
            height: 64px;
 +
            top: -2px;
 +
        }
  
−
<div class="clear extra_space"></div>
+
        .logo-daohang {
 +
            height: 64px;
 +
            left: 10%;
 +
            float: left;
 +
            position: relative;
 +
        }
  
 +
        .daohang a {
 +
            display: block;
 +
            text-decoration: none;
 +
        }
  
 +
        .daohang .shade {
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 160px;
 +
            top: 64px;
 +
            left: 0;
 +
            z-index: 1;
 +
            background-color: #EEEEEE;
 +
            opacity: 0.96;
 +
            filter: alpha(opacity=96);
 +
            box-shadow: 0 5px 15px #CCCCCC;
 +
            display: none;
 +
            border-bottom: #ffffff solid 1px;
 +
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
 +
        }
  
−
<div class="column two_thirds_size" >
+
        .daohang .caidan {
−
<h3> Project Achievements </h3>
+
            position: absolute;
 +
            top: 0;
 +
            right: 10%;
 +
            margin: 0;
 +
            z-index: 2;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 730px;
 +
            float: right;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
  
−
<p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
+
        .daohang .caidan>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 224px;
 +
        }
  
−
<ul>
+
        .daohang .shortName {
−
<li>A list of linked bullet points of the successful results during your project</li>
+
            width: 110px;
−
<li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
+
        }
−
</ul>
+
  
−
</div>
+
        .daohang .longName {
 +
            width: 170px;
 +
        }
  
 +
        .daohang .nav_head {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            color: #ffffff;
 +
            font-size: 16px !important;
 +
        }
  
 +
        .daohang .xsjPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
 +
        }
  
−
<div class="column third_size" >
+
        .daohang .xjtPic {
−
<div class="highlight decoration_A_full">
+
            display: inline-block;
−
<h3>Inspiration</h3>
+
            width: 10px;
−
<p>See how other teams presented their results.</p>
+
            height: 10px;
−
<ul>
+
            vertical-align: middle;
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results/Pathway">2014 TU Darmstadt </a></li>
+
            background-size: 100% 100%;
−
<li><a href="https://2014.igem.org/Team:Imperial/Results">2014 Imperial </a></li>
+
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
−
<li><a href="https://2014.igem.org/Team:Paris_Bettencourt/Results">2014 Paris Bettencourt </a></li>
+
        }
−
</ul>
+
−
</div>
+
−
</div>
+
  
 +
        .daohang a:hover span{
 +
            transform: rotateY(180deg);           
 +
            -webkit-transform: rotateY(180deg);           
 +
            -moz-transform: rotateY(180deg);           
 +
            -o-transform: rotateY(180deg);           
 +
            -ms-transform: rotateY(180deg);
 +
            transition: all 0.5s ease-in-out;           
 +
            -webkit-transition: all 0.5s ease-in-out;           
 +
            -moz-transition: all 0.5s ease-in-out;           
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
  
 +
        .daohang .item {
 +
            font-size: 16px;
 +
            height: 40px;
 +
            line-height: 40px;
 +
            color: #333333;
 +
            position: relative;
 +
        }
  
 +
        .daohang .caidan:hover {
 +
            height: 264px;
 +
            transition: height 0.3s;
 +
        }
  
 +
        .daohang .caidan:hover+.shade {
 +
            display: block;
 +
        }
 +
 +
        .daohang .caidan>li.hiLight:hover {
 +
            background-color: #ffffff;
 +
        }
 +
 +
        .daohang .caidan>li:hover .nav_head {
 +
            background-color: #EA0D04;
 +
        }
 +
 +
        .daohang .caidan>li:hover .item {}
 +
 +
 +
        .daohang .shortName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 +
        .daohang .shortName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #f51720;
 +
        }
 +
 +
        .daohang .longName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 +
        .daohang .longName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #f51720;
 +
        }
 +
 +
        @media screen and (max-width: 1200px) {
 +
            .logo-daohang {
 +
                left: 3%;
 +
            }
 +
 +
            .daohangyi {
 +
                font-size: 14px;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 880px) {
 +
 +
            .daohang .caidan {
 +
                right: 0;
 +
                width: 100%;
 +
            }
 +
 +
            .logo-daohang {
 +
                display: none;
 +
            }
 +
 +
            .daohang .shortName {
 +
                width: 15vw;
 +
            }
 +
 +
            .daohang .longName {
 +
                width: 25vw;
 +
            }
 +
 +
            .daohangyi img {
 +
                display: none;
 +
            }
 +
        }
 +
    </style>
 +
    <!-- 内容CSS -->
 +
    <style class="text/css">
 +
        .clearfix:after {
 +
            content: ".";
 +
            display: block;
 +
            height: 0;
 +
            clear: both;
 +
            visibility: hidden;
 +
 +
        }
 +
 +
        .neirong {
 +
            width: 100%;
 +
            height: auto;
 +
            background-color: #F3F3F3;
 +
        }
 +
 +
        .zhengwen {
 +
            width: 80%;
 +
            /* height: auto; */
 +
            margin: 20px 20px 0 0;
 +
            /* right: 2%; */
 +
            /* top: 90px; */
 +
            padding: 20px 3%;
 +
            float: right;
 +
            /* position: relative; */
 +
            background-color: #FFF;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border: 2px solid black; */
 +
            /* border-radius: 3px; */
 +
            /* overflow: hidden; */
 +
            /* display: block; */
 +
            /* font-family: Arial, Verdana, Sans-serif; */
 +
        }
 +
 +
        .cebian {
 +
            width: 15%;
 +
            /* height: 80vh; */
 +
            float: left;
 +
            /* left: 1vw; */
 +
            top: 150px;
 +
            position: fixed;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border:2px solid black */
 +
            /* background-color: #323643 */
 +
        }
 +
 +
        .daimg {
 +
            width: 100%;
 +
            height: auto;
 +
            margin: 20px 0;
 +
            box-shadow: 0 1px 3px #676767;
 +
        }
 +
 +
        .h1 {
 +
            height: 100px;
 +
            line-height: 100px;
 +
            font-weight: bold;
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 50px;
 +
            color: black;
 +
            border-bottom: 3px solid black;
 +
            /* margin: 0 2.4%; */
 +
        }
 +
 +
        .zhengwen .tuandui_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 520px;
 +
            overflow: hidden;
 +
        }
 +
 +
        .tuandui_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 +
        .zhengwen .laoshi_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 430px;
 +
        }
 +
 +
        .laoshi_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 +
        .duiyuan {
 +
            margin: 20px 0;
 +
            /* border: 1px solid red; */
 +
        }
 +
 +
        .laoshi {
 +
            margin: 20px 0;
 +
        }
 +
 +
        .duiyuan img {
 +
            width: 100%;
 +
            height: auto;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 +
        .laoshi img {
 +
            width: 100%;
 +
            height: 50vh;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 +
        .duiyuan .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 +
        .laoshi .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 +
        .duiyuan .jieshao {
 +
            width: 100%;
 +
            height: 200px;
 +
            background-color: #f6eee0;
 +
            border-bottom: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            /* border-bottom-left-radius: 5px;
 +
            border-bottom-right-radius: 5px; */
 +
        }
 +
 +
        .duiyuan .jieshao .saohua {
 +
            padding: 10px 4px 0px 4px !important;
 +
            color: black;
 +
            font-family: Arial;
 +
            font-style: italic;
 +
            font-size: 15px !important;
 +
            list-style-type: none;
 +
            text-align: justify;
 +
            line-height: 18px;
 +
        }
 +
    </style>
 +
    <!-- 滚动菜单栏CSS -->
 +
    <style>
 +
        #float01 {}
 +
 +
        #float02 {}
 +
 +
        #float03 {}
 +
 +
        div.floatCtro {
 +
            width: 100%;
 +
            height: 250px;
 +
            margin: 0;
 +
            position: relative;
 +
            background: #fff;
 +
 +
        }
 +
 +
        .daohangyi {
 +
            display: block;
 +
            width: 100%;
 +
            height: 40px;
 +
            color: #ffffff !important;
 +
            font-size: 16px;
 +
            background-color: #323643;
 +
            border-bottom: 1px solid black;
 +
            /* border-radius: 5px; */
 +
            text-decoration: none !important;
 +
        }
 +
 +
        div.floatCtro .daohanger {
 +
            width: 100%;
 +
            text-align: justify !important;
 +
            height: 45px;
 +
            line-height: 45px;
 +
            font-family: Arial;
 +
            font-size: 14px;
 +
            color: #676767;
 +
            margin: 0;
 +
            padding-left: 8%;
 +
            cursor: pointer;
 +
            background: #fff;
 +
        }
 +
 +
        div.floatCtro a {
 +
            display: inline-block;
 +
            display: none;
 +
            width: 100%;
 +
            height: 40px;
 +
            /* margin: 10px 0 0 0; */
 +
            background: #FFF;
 +
            color: #000 !important;
 +
            vertical-align: middle;
 +
            cursor: pointer;
 +
        }
 +
 +
        div.floatCtro a span {
 +
            display: block;
 +
            height: 44px;
 +
            line-height: 44px;
 +
            font-family: Arial;
 +
            font-size: 16px;
 +
            padding-left: 8%;
 +
        }
 +
 +
        div.floatCtro a:hover {
 +
            /* background: #76b39d; */
 +
            color: #EA0D04 !important;
 +
            zoom: 1;
 +
        }
 +
 +
        /* .cebian a:hover {
 +
            color: #f6eee0 !important;
 +
        } */
 +
 +
        div.floatCtro .daohanger:hover {
 +
            /* background: #76b39d; */
 +
            color: #1fa67a;
 +
            text-decoration: underline !important;
 +
        }
 +
 +
        div.floatCtro .daohanger.cur {
 +
            /* background: #1fa67a; */
 +
            color: #1fa67a;
 +
        }
 +
 +
        .biaoti {
 +
            line-height: 40px;
 +
            width: 50%;
 +
            margin-left: 6%;
 +
            text-align: center;
 +
            text-decoration: none !important;
 +
        }
 +
 +
        .daohangyi img {
 +
            display: inline-block;
 +
            width: 12px;
 +
            height: 12px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
 +
        }
 +
        .cebian div:hover img{
 +
            transform: rotateY(180deg);           
 +
            -webkit-transform: rotateY(180deg);           
 +
            -moz-transform: rotateY(180deg);           
 +
            -o-transform: rotateY(180deg);           
 +
            -ms-transform: rotateY(180deg);
 +
            transition: all 0.5s ease-in-out;           
 +
            -webkit-transition: all 0.5s ease-in-out;           
 +
            -moz-transition: all 0.5s ease-in-out;           
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
        .cebian a:hover img{
 +
            transform: rotate(360deg);           
 +
            -webkit-transform: rotate(360deg);           
 +
            -moz-transform: rotate(360deg);           
 +
            -o-transform: rotate(360deg);           
 +
            -ms-transform: rotate(360deg);
 +
            transition: all 0.5s ease-in-out;           
 +
            -webkit-transition: all 0.5s ease-in-out;           
 +
            -moz-transition: all 0.5s ease-in-out;           
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
 +
        @media screen and (max-width: 1000px) {           
 +
         
 +
            .daohangyi {
 +
                font-size: 14px;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 880px) {
 +
 +
            .daohangyi img {
 +
                display: none;
 +
            } 
 +
           
 +
            .laoshi img {
 +
                height: 30vh;
 +
            }
 +
        }
 +
    </style>
 +
 +
 +
</head>
 +
 +
<body>
 +
    <!-- 导航栏 -->
 +
    <nav class="daohang">
 +
        <a href="https://2018.igem.org/Team:HZAU-China"><img src="https://static.igem.org/mediawiki/2018/7/75/T--HZAU-China--logo-nav.png"
 +
                class="logo-daohang"></a>
 +
        <ul class="caidan">
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
 +
                    <span>Project</span>
 +
                    <span class="xsjPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Wetlab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">Interlab</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Drylab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
 +
            </li>
 +
            <li class="hiLight longName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Human&nbsp;Practices</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safty</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>About Us</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
 +
            </li>
 +
            <li class="shortName">
 +
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
 +
                    <span>Parts</span>
 +
                </a>
 +
            </li>
 +
        </ul>
 +
        <div class="shade"></div>
 +
    </nav>
 +
    <!-- 内容 -->
 +
    <div class="neirong clearfix">
 +
        <!-- 正文 -->
 +
        <div class="zhengwen">
 +
            <img class="daimg" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" alt="">
 +
            <div id="float01" class="cur">
 +
                <div class="h1">biaotiyi</div>
 +
 +
            </div>
 +
            <div id="float02">
 +
                <div class="h1">biaotier</div>
 +
 +
            </div>
 +
            <div id="float03">
 +
                <div class="h1">biaotisan</div>
 +
               
 +
            </div>
 +
        </div>
 +
        <!-- 侧边 -->
 +
        <div class="cebian">
 +
            <!-- 滚动菜单栏 -->
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Description">
 +
                <span class="biaoti">Description</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Design">
 +
                <span class="biaoti">Design</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <div class="daohangyi">
 +
                    <span class="biaoti">Results</span>
 +
                    <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
 +
            </div>
 +
            <div class="floatCtro">
 +
                <p class="daohanger">neirongyi</p>
 +
                <p class="daohanger">neironger</p>
 +
                <p class="daohanger">neirongsan</p>
 +
                <a>
 +
                    <span>Back&nbsp;to&nbsp;Top</span>
 +
                </a>
 +
            </div>
 +
            <!-- <div class="daohangyi"> -->
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">
 +
                <span class="biaoti">Demonstrate</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <!-- </div> -->
 +
            <!-- 滚动菜单栏 -->
 +
        </div>
 +
    </div>
 +
 +
    <!-- 滚动菜单栏jQuery -->
 +
    <script src="jquery.js" type="text/javascript"></script>
 +
    <script>
 +
        $(function () {
 +
            var AllHet = $(window).height();
 +
            var mainHet = $('.floatCtro').height();
 +
            var fixedTop = (AllHet - mainHet) / 2
 +
            //  $('div.floatCtro').css({top:fixedTop+'px'});
 +
            $('div.floatCtro p').click(function () {
 +
                var ind = $('div.floatCtro p').index(this) + 1;
 +
                var topVal = $('#float0' + ind).offset().top;
 +
                $('body,html').animate({ scrollTop: topVal }, 1000)
 +
            })
 +
            $('div.floatCtro a').click(function () {
 +
                $('body,html').animate({ scrollTop: 0 }, 1000)
 +
            })
 +
            $(window).scroll(scrolls)
 +
            scrolls()
 +
            function scrolls() {
 +
                var f1, f2, f3, bck;
 +
                var fixRight = $('div.floatCtro p');
 +
                var blackTop = $('div.floatCtro a')
 +
                var sTop = $(window).scrollTop();
 +
                fl = $('#float01').offset().top;
 +
                f2 = $('#float02').offset().top;
 +
                f3 = $('#float03').offset().top;
 +
 +
                if (sTop <= f2 - 100) {
 +
                    blackTop.fadeOut(300).css('display', 'none')
 +
                }
 +
                else {
 +
                    blackTop.fadeIn(300).css('display', 'block')
 +
                }
 +
 +
                if (sTop >= fl) {
 +
                    fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
                if (sTop >= f2 - 100) {
 +
                    fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
                if (sTop >= f3 - 100) {
 +
                    fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
 +
            }
 +
        })
 +
    </script>
 +
    <!-- 滚动菜单栏jQuery -->
 +
 +
</body>
  
 
</html>
 
</html>

Revision as of 18:10, 4 October 2018

biaotiyi
biaotier
biaotisan
Description Design
Results

neirongyi

neironger

neirongsan

Back to Top
Demonstrate