Difference between revisions of "Template:Jilin China Menu"

 
(58 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<title>Particles</title>
 
<title>Particles</title>
−
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
+
         <script type="text/javascript" src="https://2016.igem.org/Team:Jilin_China/js/jquery_191"></script>
 
          
 
          
 
<style>
 
<style>
Line 58: Line 58:
 
}
 
}
 
 
 +
.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**********************************************/
 
/*************************************************整屏翻页*************defualt**********************************************/
  
Line 73: Line 123:
 
max-width: 69em;
 
max-width: 69em;
 
margin: 0 auto;
 
margin: 0 auto;
−
padding: 0 1.875em 3.125em 1.875em;
 
 
}
 
}
 
.main > section {
 
.main > section {
Line 87: Line 136:
 
.closemenu{
 
.closemenu{
 
border:none;  
 
border:none;  
−
background:url(https://static.igem.org/mediawiki/2016/5/51/T--Jilin_China--web-s-bifi.png);  
+
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;  
 
width:310px;  
 
height:310px;  
 
height:310px;  
 
position:absolute;
 
position:absolute;
−
bottom:-100px;  
+
bottom:-140px;  
 
left:-160px;  
 
left:-160px;  
 
z-index:1000000;
 
z-index:1000000;
Line 98: Line 148:
 
.main > section input:hover {
 
.main > section input:hover {
 
border:none;
 
border:none;
−
background:url(https://static.igem.org/mediawiki/2016/8/80/T--Jilin_China--web-o-bifi.png);
+
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 {
 
.main > section input.active {
 
border:none;
 
border:none;
−
background:url(https://static.igem.org/mediawiki/2016/8/80/T--Jilin_China--web-o-bifi.png);
+
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;
 
}
 
}
  
Line 135: Line 189:
 
}
 
}
 
CanvasParticle(config);
 
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>
Line 141: Line 204:
  
 
<!------------------------------------------------整屏翻页------------------------------------------------------->
 
<!------------------------------------------------整屏翻页------------------------------------------------------->
 +
<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------------------------------------------------->
 
<!------------------------ping----------------------------------menu------------------------------------------------->
 +
 
<div>
 
<div>
 
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
 
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
Line 148: Line 240:
 
<h3>Menu</h3>
 
<h3>Menu</h3>
 
<ul id="s1">
 
<ul id="s1">
−
<li><a href="#">Home</a>
+
<li><a href="https://2016.igem.org/Team:Jilin_China">Home</a>
−
<li><a href="#">Project</a>
+
<li><a href="https://2016.igem.org/Team:Jilin_China/Project">Project</a>
 
             <ul>
 
             <ul>
−
                 <li><a href="#">Background</a></li>
+
                 <li><a href="https://2016.igem.org/Team:Jilin_China/Project?openId=pj1" onClick="jpj1(); return false;">Background</a></li>
−
                 <li><a href="#">Design</a></li>
+
                 <li><a href="https://2016.igem.org/Team:Jilin_China/Project?openId=pj2" onClick="jpj2(); return false;" >Design</a></li>
 
                  
 
                  
 
                 </ul>
 
                 </ul>
 
             </li>
 
             </li>
  
−
                         <li><a href="#">Model</a>
+
                         <li><a href="https://2016.igem.org/Team:Jilin_China/Model">Model</a>
 
             <ul>
 
             <ul>
−
                 <li><a href="#">Our Model</a></li>
+
                 <li><a href="https://2016.igem.org/Team:Jilin_China/Model?openId=md1" onClick="jmd1(); return false;" >Our Model</a></li>
−
                 <li><a href="#">For Others</a></li>
+
                 <li><a href="https://2016.igem.org/Team:Jilin_China/Model?openId=md15" onClick="jmd15(); return false;">For Others</a></li>
 
                  
 
                  
 
                 </ul>
 
                 </ul>
 
                         </li>
 
                         </li>
  
−
<li><a href="#">Experiments</a>
+
<li><a href="javascript:;">Experiments</a>
 
             <ul>
 
             <ul>
−
<li><a href="#">Notebook</a></li>
+
                <li><a href="https://2016.igem.org/Team:Jilin_China/Protocol">Protocol</a></li>
−
                 <li><a href="#">Interlab</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>
 
             </ul>
 
             </li>
 
             </li>
  
−
                         <li><a href="#">Result</a></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="#">Parts</a>
+
<li><a href=" https://2016.igem.org/Team:Jilin_China/Parts">Parts</a>
 
             <ul>
 
             <ul>
−
<li><a href="#">Basic Parts</a></li>
+
<li><a href="https://2016.igem.org/Team:Jilin_China/Basic_Part">Basic Part</a></li>
−
                 <li><a href="#">Composite Parts</a></li>
+
                 <li><a href="https://2016.igem.org/Team:Jilin_China/Composite_Part">Composite Part</a></li>
−
                <li><a href="#">Modified Parts</a></li>
+
             </ul>              
−
             </ul>
+
          </li>
−
                        </li>
+
  
−
                         <li><a href="#">Improvement</a></li>
+
                         <li><a href="https://2016.igem.org/Team:Jilin_China/Description">Improvements</a></li>
  
  
−
<li><a href="#">Human Practice</a></li>
+
<li><a href="https://2016.igem.org/Team:Jilin_China/Integrated_Practices">Human Practice</a></li>
−
                         <li><a href="#">Collaboration</a></li>
+
                         <li><a href="https://2016.igem.org/Team:Jilin_China/Collaborations">Collaborations</a></li>
 
                
 
                
  
Line 229: Line 327:
  
 
};
 
};
 +
 
           </script>
 
           </script>
 
</div>
 
</div>

Latest revision as of 06:10, 23 January 2017

Particles