Difference between revisions of "Team:DLUT China/test"

Line 1: Line 1:
−
<html>
+
<html lang="en">
 
<head>
 
<head>
−
<meta charset="utf-8">
+
<meta charset="UTF-8">
−
<title>jQuery垂直选项卡图片滑动切换代码</title>
+
<title>Particles</title>
 +
        <script type="text/javascript" src="https://2016.igem.org/Team:Jilin_China/js/jquery_191"></script>
 +
       
 +
<style>
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
−
<link rel="stylesheet" <link rel="stylesheet" href="https://2018.igem.org/Team:DLUT_China/css/style1?action=raw&ctype=text/css">
+
#top_title, #contentSub,#sideMenu, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none}
−
<link rel="stylesheet" <link rel="stylesheet" href="https://2017.igem.org/Template:SCU_China/default_CSS?action=raw&ctype=text/css">
+
        #content {width: 100%;  background: transparent; margin: 0; padding: 0; }
 +
        #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5  { margin-bottom: 2px; }
  
 +
        #globalWrapper, #content  {
 +
      width: 100%;
 +
      height: 100%;
 +
              margin:  0;
 +
      float:  none;
 +
      font-size: 100%;
 +
              z-index: 0;
 +
        }
 +
        #HQ_page, #bodyContent, #mw-content-text { height:100%; }
 +
        #HQ_page p{ font-size:1.7em;text-align:justify;}
 +
        div[id=mw-content-text] > p {
 +
            display:none;
 +
        }
 +
     
 +
 +
/************************************************整屏翻页***********************************************************/
 +
body{background-color:rgba(59,59,59,0.81);-webkit-text-size-adjust:none;
 +
-webkit-transition: all 0.3s ease;
 +
-moz-transition: all 0.3s ease;
 +
transition: all 0.3s ease;
 +
position:relative; left:0px;overflow:hidden;
 +
}
 +
::-webkit-scrollbar {
 +
    width: 12px;
 +
}
 +
 +
::-webkit-scrollbar-track {
 +
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 +
    border-radius: 10px;
 +
}
 +
 +
::-webkit-scrollbar-thumb {
 +
    background: rgba(0,0,0,0.2);
 +
}
 +
::-webkit-scrollbar-thumb:hover {
 +
border-radius: 10px;
 +
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
 +
}
 +
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
 +
h1,h2,h3,h4,h5,h6{font-size:100%;}
 +
body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}
 +
ol,ul{list-style:none;}
 +
 +
html,body{ width:100%; height:100%;
 +
}
 +
 +
.section-wrap{ width:100%;height:100%;position:relative; z-index:0;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
 +
.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
 +
.section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center; height:100%;}
 +
.section-wrap .section .title p{ padding:0 4%;opacity:1}
 +
.content{
 +
font-size:0.5em; text-align:justify; padding:0 15px 0 15px; overflow: auto; max-height:60%;width:90%; background-color:rgba(151,151,151,0.35); align-content:center; margin:auto;
 +
}
 +
.Rcontent{float: right; width: 50%; margin: 1% 3% 0 0}
 +
.section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
 +
.section-wrap .section-1{ background-color:rgba(51,112,81,0.3)}
 +
.section-wrap .section-2{ background-color:rgba(92,184,92,0.3)}
 +
.section-wrap .section-3{ background-color:rgba(91,192,222,0.3)}
 +
.section-wrap .section-4{ background-color:rgba(240,173,78,0.3)}
 +
.section-wrap .section-5{ background-color:rgba(217,83,79,0.3)}
 +
.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}
 +
.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
 +
.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
 +
.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
 +
.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
 +
.put-section-5{ transform:translateY(-500%);-webkit-transform:translateY(-500%);}
 +
.put-section-6{ transform:translateY(-600%);-webkit-transform:translateY(-600%);}
 +
.put-section-7{ transform:translateY(-700%);-webkit-transform:translateY(-700%);}
 +
.put-section-8{ transform:translateY(-800%);-webkit-transform:translateY(-800%);}
 +
.put-section-9{ transform:translateY(-900%);-webkit-transform:translateY(-900%);}
 +
.put-section-10{ transform:translateY(-1000%);-webkit-transform:translateY(-1000%);}
 +
.put-section-11{ transform:translateY(-1100%);-webkit-transform:translateY(-1100%);}
 +
.put-section-12{ transform:translateY(-1200%);-webkit-transform:translateY(-1200%);}
 +
.put-section-13{ transform:translateY(-1300%);-webkit-transform:translateY(-1300%);}
 +
.put-section-14{ transform:translateY(-1400%);-webkit-transform:translateY(-1400%);}
 +
.put-section-15{ transform:translateY(-1500%);-webkit-transform:translateY(-1500%);}
 +
.put-section-16{ transform:translateY(-1600%);-webkit-transform:translateY(-1600%);}
 +
.put-section-17{ transform:translateY(-1700%);-webkit-transform:translateY(-1700%);}
 +
.put-section-18{ transform:translateY(-1800%);-webkit-transform:translateY(-1800%);}
 +
.put-section-19{ transform:translateY(-1900%);-webkit-transform:translateY(-1900%);}
 +
.put-section-20{ transform:translateY(-2000%);-webkit-transform:translateY(-2000%);}
 +
.put-section-21{ transform:translateY(-2100%);-webkit-transform:translateY(-2100%);}
 +
.put-section-22{ transform:translateY(-2200%);-webkit-transform:translateY(-2200%);}
 +
.put-section-23{ transform:translateY(-2300%);-webkit-transform:translateY(-2300%);}
 +
.put-section-24{ transform:translateY(-2400%);-webkit-transform:translateY(-2400%);}
 +
.put-section-25{ transform:translateY(-2500%);-webkit-transform:translateY(-2500%);}
 +
.put-section-26{ transform:translateY(-2600%);-webkit-transform:translateY(-2600%);}
 +
.put-section-27{ transform:translateY(-2700%);-webkit-transform:translateY(-2700%);}
 +
.put-section-28{ transform:translateY(-2800%);-webkit-transform:translateY(-2800%);}
 +
.section-btn{ width:14px;position:fixed;right:1%;top:50%;}
 +
.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;}
 +
.section-btn li.on{ background:#fff}
 +
.arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}
 +
.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}
 +
@keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
 +
@-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
 +
/*************************************************整屏翻页*************defualt**********************************************/
 +
 +
 +
a {
 +
color: #f0f0f0;
 +
text-decoration: none;
 +
}
 +
 +
a:hover {
 +
color: #000;
 +
}
 +
.main {
 +
width: 90%;
 +
max-width: 69em;
 +
margin: 0 auto;
 +
}
 +
.main > section {
 +
/*max-width: 260px;
 +
width: 90%;*/
 +
height:100%;
 +
width:100%;
 +
margin: 0 auto;
 +
}
 +
.main > section input {
 +
border: none;
 +
}
 +
.closemenu{
 +
border:none;
 +
background:url(https://static.igem.org/mediawiki/2016/d/d5/T--Jilin_China--mc-1.png) top right no-repeat;
 +
        background-size:50% 50%;
 +
width:310px;
 +
height:310px;
 +
position:absolute;
 +
bottom:-140px;
 +
left:-160px;
 +
z-index:1000000;
 +
outline: none;
 +
}
 +
.main > section input:hover {
 +
border:none;
 +
background:url(https://static.igem.org/mediawiki/2016/8/80/T--Jilin_China--web-o-bifi.png) top right no-repeat;
 +
        background-size:50% 70%;
 +
bottom:-80px;
 +
}
 +
 +
.main > section input.active {
 +
border:none;
 +
background:url(https://static.igem.org/mediawiki/2016/8/80/T--Jilin_China--web-o-bifi.png) top right no-repeat;
 +
        background-size:50% 70%;
 +
bottom:-80px;
 +
}
 +
 +
.main > section button.disabled {
 +
background: #aaa;
 +
pointer-events: none;
 +
}
 +
/**************************************************************************************************************/
 +
</style>
 +
<!--<link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:Jilin_China/css/default?action=raw&ctype=text/css"/>-->
 +
 +
<link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:Jilin_China/css/component?action=raw&ctype=text/css" />
 +
 +
<script type="text/javascript" src="https://2016.igem.org/Team:Jilin_China/js/modernizr?action=raw&ctype=text/javascript""></script>
 
</head>
 
</head>
−
<body><script src="/demos/googlegg.js"></script>
+
<body>
 +
<!--------------------------------------------------BACKGROUND--------------------------------------------------------->
 +
<script type="text/javascript">
 +
window.onload = function(){
 +
var config = {
 +
vx: 4,
 +
vy:  4,
 +
height: 2,
 +
width: 2,
 +
count: 100,
 +
color: "121, 162, 185",
 +
stroke: "100,200,180",
 +
dist: 6000,
 +
e_dist: 20000,
 +
max_conn: 10
 +
}
 +
CanvasParticle(config);
 +
var url = location.search; //获取url中"?"符后的字串
 +
  if (url.indexOf("?") != -1) {    //判断?后面是否有参数
 +
      var str = url.substr(1);
 +
//从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串 这里会获得类似“id=1”这样的字符串
 +
      var strNum = str.split("="); 
 +
//用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
 +
        //alert(strNum[1]);          直接弹出第一个参数 （如果有多个参数 还要进行循环的）
 +
      document.getElementById(strNum[1]).click();
 +
  }
 +
}
 +
</script>
 +
<script type="text/javascript" src="https://2016.igem.org/Team:Jilin_China/js/scrollify_min?action=raw&ctype=text/javascript"></script>
 +
 
 +
 
 +
<!------------------------------------------------整屏翻页------------------------------------------------------->
 +
<script>
 +
function jpj1(){document.getElementById("pj1").click();}
 +
function jpj2(){document.getElementById("pj2").click();}
 +
function jump3(){document.getElementById("jp3").click();}
 +
function jmd1(){document.getElementById("md1").click();}
 +
function jmd15(){document.getElementById("md15").click();}
 +
function hpb(){document.getElementById("hpb").click();}
 +
 
 +
function Design(){
 +
var url="https://2016.igem.org/Team:Jilin_China/Description"
 +
var str = "";
 +
        if(Request.Url.ToString().IndexOf("?")<0)
 +
        {
 +
          str = Request.Url.ToString();
 +
 
 +
                  }
 +
        else
 +
        {
 +
          str = Request.Url.ToString().Substring(0, Request.Url.ToString().IndexOf("?"));
 +
 
 +
                    }alert(str);
 +
      if(str==url){
 +
          jump2();
 +
         
 +
         
 +
      }
 +
      }
 +
 
 +
</script>
 +
<!------------------------ping----------------------------------menu------------------------------------------------->
 +
 
 +
<div>
 +
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
 +
 
 +
<h3>Menu</h3>
 +
<ul id="s1">
 +
<li><a href="https://2016.igem.org/Team:Jilin_China">Home</a>
 +
<li><a href="https://2016.igem.org/Team:Jilin_China/Project">Project</a>
 +
            <ul>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Project?openId=pj1" onClick="jpj1(); return false;">Background</a></li>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Project?openId=pj2" onClick="jpj2(); return false;" >Design</a></li>
 +
               
 +
                </ul>
 +
            </li>
 +
 
 +
                        <li><a href="https://2016.igem.org/Team:Jilin_China/Model">Model</a>
 +
            <ul>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Model?openId=md1" onClick="jmd1(); return false;" >Our Model</a></li>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Model?openId=md15" onClick="jmd15(); return false;">For Others</a></li>
 +
               
 +
                </ul>
 +
                        </li>
 +
 
 +
<li><a href="javascript:;">Experiments</a>
 +
            <ul>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Protocol">Protocol</a></li>
 +
<li><a href="https://2016.igem.org/Team:Jilin_China/Notebook">Notebook</a></li>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Interlab">Interlab</a></li>
 +
 
 +
            </ul>
 +
            </li>
 +
 
 +
                        <li><a href="#">Result</a>
 +
            <ul>
 +
<li><a href="https://2016.igem.org/Team:Jilin_China/Proof">Proof</a></li>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Demonstrate">Demonstrate</a></li>
 +
 
 +
            </ul>           
 +
            </li>
 +
 +
<li><a href=" https://2016.igem.org/Team:Jilin_China/Parts">Parts</a>
 +
            <ul>
 +
<li><a href="https://2016.igem.org/Team:Jilin_China/Basic_Part">Basic Part</a></li>
 +
                <li><a href="https://2016.igem.org/Team:Jilin_China/Composite_Part">Composite Part</a></li>
 +
            </ul>             
 +
          </li>
 +
 
 +
                        <li><a href="https://2016.igem.org/Team:Jilin_China/Description">Improvements</a></li>
 +
 
 +
 
 +
<li><a href="https://2016.igem.org/Team:Jilin_China/Integrated_Practices">Human Practice</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:Jilin_China/Collaborations">Collaborations</a></li>
 +
             
 +
 
 +
<li><a href="https://2016.igem.org/Team:Jilin_China/Attributions">Attributions</a></li>
 +
            </ul>
 +
 
 +
</nav>
 +
       
 +
        <div class="container">
 +
       
 +
        <div class="main">
 +
 
 +
<section>
 +
                <input id="showLeftPush" class="closemenu" type="button">
 +
                   
 +
                </section>
  
−
<div class="tab">
 
−
<div class="box">
 
−
<ul class="menus">
 
−
<li class="bg">tab1</li>
 
−
<li>tab2</li>
 
−
<li>tab3</li>
 
−
<li>tab4</li>
 
−
<li>tab5</li>
 
−
<li>tab6</li>
 
−
<li>tab7</li>
 
−
</ul>
 
−
<div class="right">
 
−
<div class="scroll">
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
−
<div class="tab_right">
 
−
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
 
−
</div>
 
 
</div>
 
</div>
 +
 
</div>
 
</div>
−
</div>
+
       
−
<div class="clear"></div>
+
        <script type="text/javascript" src="https://2016.igem.org/Team:Jilin_China/js/classie?action=raw&ctype=text/javascript"></script>
−
</div>
+
  
−
<script src="https://2018.igem.org/Team:DLUT_China/js/index?action=raw&ctype=text/javascript"></script>
+
<script>
−
<script  src="https://2018.igem.org/Team:DLUT_China/js/jquery-1.8.3.min?action=raw&ctype=text/javascript"></script>
+
var
 +
menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
 +
showLeftPush = document.getElementById( 'showLeftPush' ),
 +
body = document.body;
 +
 +
 +
 +
showLeftPush.onclick = function() {
  
−
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
+
classie.toggle( this, 'active' );
−
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
+
 
−
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
+
classie.toggle( body, 'cbp-spmenu-push-toright' );
 +
 
 +
classie.toggle( menuLeft, 'cbp-spmenu-open' );
 +
 
 +
disableOther( 'showLeftPush' );
 +
 
 +
};
 +
 +
          </script>
 
</div>
 
</div>
 +
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:58, 13 May 2018

Particles