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

(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 judges-will-not-evaluate">
+
        #HQ_page p {
−
<h3>★  ALERT! </h3>
+
            margin: 0 !important;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
        }
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
        #content {
 +
            padding: 0px;
 +
            width: 100%;
 +
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
−
<div class="clear"></div>
+
        #bodyContent h1,
 +
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
 +
        #team_name {
 +
            display: none
 +
        }
  
−
<div class="column full_size">
+
        .global_wrapper {
−
<h1>Software</h1>
+
            padding: 0px 0px 0px 0px;
−
</div>
+
        }
−
<div class="column two_thirds_size">
+
−
<h3>Best Software Tool Special Prize</h3>
+
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
+
  
 +
        #top_menu_14 {
 +
            height: 16px;
 +
        }
  
−
<br><br>
+
        * {
−
To compete for the <a href="https://2018.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>.
+
            margin: 0;
−
<br><br>
+
            padding: 0;
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
            list-style: none;
−
</p>
+
            list-style-type: none;
 +
            text-decoration: none !important;
 +
        }
  
 +
        body {
 +
            margin: 0;
 +
            padding: 0;
 +
            background-color: #F3F3F3;
 +
            font-size: 16px;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
            letter-spacing: 0;
 +
            color: #FFFFFF;
 +
        }
  
−
</div>
+
        .daohang {
 +
            background-color: #323643;
 +
            position: relative;
 +
            color: #ffffff;
 +
            height: 64px;
 +
            top: -2px;
 +
        }
  
−
<div class="column third_size">
+
        .logo-daohang {
−
<div class="highlight decoration_A_full">
+
            height: 64px;
−
<h3> Inspiration </h3>
+
            left: 10%;
−
<p>
+
            float: left;
−
Here are a few examples from previous teams:
+
            position: relative;
−
</p>
+
        }
−
<ul>
+
 
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
        .daohang a {
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
            display: block;
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
            text-decoration: none;
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
        }
−
</ul>
+
 
−
</div>
+
        .daohang .shade {
−
</div>
+
            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;
 +
        }
 +
 
 +
        .daohang .caidan {
 +
            position: absolute;
 +
            top: 0;
 +
            right: 10%;
 +
            margin: 0;
 +
            z-index: 2;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 730px;
 +
            float: right;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
 +
 
 +
        .daohang .caidan>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 224px;
 +
        }
 +
 
 +
        .daohang .shortName {
 +
            width: 110px;
 +
        }
 +
 
 +
        .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")
 +
        }
 +
 
 +
        .daohang .xjtPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
 +
        }
 +
 
 +
        .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/Model">
 +
                <span class="biaoti">Model</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">Software</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" style="height:20px">
 +
                </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:34, 4 October 2018

biaotiyi
biaotier
biaotisan
Model
Software

neirongyi

neironger

neirongsan

Back to Top