Difference between revisions of "Team:OUC-China"

Line 6: Line 6:
 
<meta name="renderer" content="webkit">
 
<meta name="renderer" content="webkit">
 
<title>indexdemo</title>
 
<title>indexdemo</title>
−
<link type="text/css" rel="stylesheet" href="style/index.css" />
 
  
 
<script type="text/javascript" src="js/jquery.min.js"></script>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
−
<!--首页ad背景图更换-->
+
<!--Home background map replacement-->
 
<script  language="javascript" type="text/javascript">
 
<script  language="javascript" type="text/javascript">
 
     var images_id= new Array("images/f1.jpg", "images/f2.jpg", "images/f3.jpg");
 
     var images_id= new Array("images/f1.jpg", "images/f2.jpg", "images/f3.jpg");
Line 20: Line 19:
 
         index++;       
 
         index++;       
 
     }   
 
     }   
−
     document.getElementById("index_flash").style.backgroundImage="url("+images_id[index]+")";
+
     document.getElementById("indexFlash").style.backgroundImage="url("+images_id[index]+")";
 
}
 
}
 
window.onload = function()
 
window.onload = function()
Line 26: Line 25:
 
     setInterval(switch_background, 1000);
 
     setInterval(switch_background, 1000);
 
} </script>
 
} </script>
 +
<style>
 +
 +
body{
 +
-webkit-text-size-adjust:none;
 +
margin:0px;}
 +
h1,h2,h3,h4,h5,h6{
 +
font-size:62.5%;
 +
}
 +
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%;
 +
overflow:hidden;
 +
}
 +
 +
.indexNavBox{ width:80%; height:110px; margin-left:10%; margin-top:-50px; border:#3fb8ab solid 1px; position:relative; color:#FFF;}
 +
.indexNavLogo{width:9%; height:45px; margin-left:10%; margin-top:28px ;background-image:url(images/OUC-China-logo.png); }
 +
.indexNavTxt{ font-size:1.1rem; width:64%; height:45px; right:6%;top:25px; position:absolute;}
 +
.indexNavBox a{ color:#FFF; text-decoration:none;}
 +
.indexNavBox a:hover{color:#f4dc76;}
 +
#indexFlash{ width:50%; height:300px; margin-left:25%; margin-top:205px; position:absolute;}
 +
.sectionTxtBox2{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; margin-top:60px;}
 +
.bg100{ background-size:100% 100%;}
 +
.sectionTittle{ width:70%; height:45px; font-size:1.8rem; position:relative; color:#FFF;}
 +
.sectionTxt2{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px; color:#FFF;}
 +
 +
.sectionTxtBox3{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; top:60px; color:#FFF;}
 +
.sectionTxt3{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px;}
 +
 +
.sectionTxtBox4{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; top:60px; color:#FFF;}
 +
.sectionTxt4{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px;}
 +
 +
.sectionTxtBox5{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; top:60px; color:#FFF;}
 +
.sectionTxt5{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px;}
 +
.bottom{ height:10%; width:45%; margin-left:30%;top:50px;background-image:url(images/OUC-China-sponsor.png); background-size:100% 100%; position:absolute;}
 +
.bottomTxt{ height:10%; width:30%; margin-left:40%;top:120px; position:absolute;}
 +
.bottomTxt i { font-size:14px; color:#3fb8ab; text-align:center; font-style:inherit;}
 +
.bottomFb{ height:34px; width:34px; position:absolute; top:115px; margin-left:60%; }
 +
.section-wrap{
 +
    width:100%;
 +
height:100%;
 +
overflow:visible;
 +
transition:transform 1s cubic-bezier(0.05,0,0.005,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:#CF0;
 +
font-size:2.4em;
 +
text-align:center;
 +
}
 +
.section-wrap .section .title p{
 +
    padding:0 4%;
 +
opacity:0
 +
}
 +
.section-wrap .section .title.active .tit{
 +
    opacity:1;
 +
transform:translateY(-60px);
 +
-webkit-transform:translateY(-60px);
 +
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-image:url(images/OUC-China-home1.jpg); background-size:100% 100%;}
 +
.section-wrap .section-2{ background-image:url(images/OUC-China-home2.jpg); background-size:100% 100%;}
 +
.section-wrap .section-3{ background-image:url(images/OUC-China-home3.jpg); background-size:100% 100%;}
 +
.section-wrap .section-4{ background-image:url(images/OUC-China-home4.jpg); background-size:100% 100%;}
 +
.section-wrap .section-5{ background-image:url(images/OUC-China-home5.jpg); background-size:100% 100%;}
 +
.section-wrap .section-6{ background-image:url(images/OUC-China-home6.jpg); background-size:100% 100%;}
 +
.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(-430%);
 +
-webkit-transform:translateY(-430%);
 +
}
 +
 +
.section-btn{
 +
    width:14px;
 +
position:fixed;
 +
right:4%;
 +
top:60%;}
 +
.section-btn li{
 +
    width:20px;
 +
height:20px;
 +
cursor:pointer;
 +
border-radius:50%;
 +
-webkit-border-radius:50%;
 +
margin-bottom:15px;
 +
    background-image:url(images/OUC-China-home-dot1.png);
 +
 +
}
 +
.section-btn li.on{
 +
background-image:url(images/OUC-China-home-dot2.png);
 +
    border:none;
 +
}
 +
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
Line 31: Line 158:
 
   <div class="section section-1">
 
   <div class="section section-1">
 
     <div class="title active">
 
     <div class="title active">
−
       <div class="index_nav_box"> <a href="#"  title="home">
+
       <div class="indexNavBox"> <a href="#"  title="home">
−
         <div class="index_nav_logo bg100"></div>
+
         <div class="indexNavLogo bg100"></div>
 
         </a>
 
         </a>
−
         <div class="index_nav_txt">
+
         <div class="indexNavTxt">
 
           <table width="100%" border="0" cellspacing="0" cellpadding="0">
 
           <table width="100%" border="0" cellspacing="0" cellpadding="0">
 
              
 
              
Line 48: Line 175:
 
       </div>
 
       </div>
 
     </div>
 
     </div>
−
     <div id="index_flash" class="bg100"></div>
+
     <div id="indexFlash" class="bg100"></div>
 
      
 
      
 
   </div>
 
   </div>
 
   <div class="section section-2">
 
   <div class="section section-2">
 
      
 
      
−
     <div class="section_txtbox2">
+
     <div class="sectionTxtBox2">
−
       <div class="section_tittle">Abstract</div>
+
       <div class="sectionTittle">Abstract</div>
−
         <div class="section_txt2">Gene regulation has typically employed chemically mediated expression systems, which are slow and could be limited by medium during drug diffusion. The development of remote regulation systems that could response to physical signals is in demand.  
+
         <div class="sectionTxt2">Gene regulation has typically employed chemically mediated expression systems, which are slow and could be limited by medium during drug diffusion. The development of remote regulation systems that could response to physical signals is in demand.  
 
This summer, we are trying to design a platform responsed to electromagnetic signal. This platform is composed of 2 sessions : magnetic receiver and thermosensitive regulator. </div>
 
This summer, we are trying to design a platform responsed to electromagnetic signal. This platform is composed of 2 sessions : magnetic receiver and thermosensitive regulator. </div>
 
        
 
        
Line 64: Line 191:
 
   </div>
 
   </div>
 
   <div class="section section-3">
 
   <div class="section section-3">
−
     <div class="section_txtbox3">
+
     <div class="sectionTxtBox3">
−
       <div class="section_tittle">Receiver</div>
+
       <div class="sectionTittle">Receiver</div>
−
         <div class="section_txt3">For magnetic receiver, we chose ferritin, the iron-storage protein in organisms, which could synthesize ferric oxihydroxide core in its hollow protein shell. When exposed to electromagnetic field, the ferric oxihydroxide core would be heated, which would trigger thermosensitive regulator. </div>
+
         <div class="sectionTxt3">For magnetic receiver, we chose ferritin, the iron-storage protein in organisms, which could synthesize ferric oxihydroxide core in its hollow protein shell. When exposed to electromagnetic field, the ferric oxihydroxide core would be heated, which would trigger thermosensitive regulator. </div>
 
     </div>   
 
     </div>   
 
   </div>
 
   </div>
 
   <div class="section section-4">
 
   <div class="section section-4">
−
     <div class="section_txtbox4">
+
     <div class="sectionTxtBox4">
−
       <div class="section_tittle">Regulator</div>
+
       <div class="sectionTittle">Regulator</div>
−
         <div class="section_txt4">For thermosensitive regulator, we chose RNA thermometer and constructed a thermosensitive T7 RNA polymerase. RNA thermometer is a structured RNA which could expose RBS only when heated. The thermosensitive T7 RNA polymerase is a normal T7 RNA polymerase at the selected locus of which was inserted by a temperature-sensitive intein, which could self-splice at specific temperature.</div>
+
         <div class="sectionTxt4">For thermosensitive regulator, we chose RNA thermometer and constructed a thermosensitive T7 RNA polymerase. RNA thermometer is a structured RNA which could expose RBS only when heated. The thermosensitive T7 RNA polymerase is a normal T7 RNA polymerase at the selected locus of which was inserted by a temperature-sensitive intein, which could self-splice at specific temperature.</div>
 
     </div>   
 
     </div>   
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
   <div class="section section-5">
 
   <div class="section section-5">
−
     <div class="section_txtbox5">
+
     <div class="sectionTxtBox5">
−
       <div class="section_tittle">Achievement</div>
+
       <div class="sectionTittle">Achievement</div>
−
         <div class="section_txt5">123</div>
+
         <div class="sectionTxt5">123</div>
 
     </div>   
 
     </div>   
 
     </div>
 
     </div>
Line 85: Line 212:
 
   <div class="section section-6">
 
   <div class="section section-6">
 
   <div class="bottom"></div>
 
   <div class="bottom"></div>
−
   <div class="bottom_txt"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;follow us on Facebook@IGEM OUC<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mail to:oucigem@163.com</i>
+
   <div class="bottomTxt"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;follow us on Facebook@IGEM OUC<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mail to:oucigem@163.com</i>
 
   </div>
 
   </div>
−
   <div class="bottom_fb"><a href="https://www.facebook.com/oucigem" ><img  alt="https://www.facebook.com/oucigem" src="images/OUC-China-Facebook.png"></a></div>
+
   <div class="bottomFb"><a href="https://www.facebook.com/oucigem" ><img  alt="https://www.facebook.com/oucigem" src="images/OUC-China-Facebook.png"></a></div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
Line 101: Line 228:
 
<script type="text/javascript" src="js/jquery.min.js"></script>  
 
<script type="text/javascript" src="js/jquery.min.js"></script>  
 
<script type="text/javascript">
 
<script type="text/javascript">
−
//此处引用：鼠标滚轮mousewheel插件
+
//Here reference: mouse wheel mousewheel plugin
 
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
 
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
 
 
Line 110: Line 237:
 
$arrow = $('.arrow');
 
$arrow = $('.arrow');
 
 
−
/*当前页面赋值*/
+
/*Current page assignment*/
 
function up(){i++;if(i==$btn.length){i=0};}
 
function up(){i++;if(i==$btn.length){i=0};}
 
function down(){i--;if(i<0){i=$btn.length-1};}
 
function down(){i--;if(i<0){i=$btn.length-1};}
 
 
−
/*页面滑动*/
+
/*Page slide*/
 
function run(){
 
function run(){
 
$btn.eq(i).addClass('on').siblings().removeClass('on');
 
$btn.eq(i).addClass('on').siblings().removeClass('on');
Line 120: Line 247:
 
};
 
};
 
 
−
/*右侧按钮点击*/
+
/*Right button click*/
 
$btn.each(function(index) {
 
$btn.each(function(index) {
 
$(this).click(function(){
 
$(this).click(function(){
Line 128: Line 255:
 
});
 
});
 
 
−
/*翻页按钮点击*/
+
/*Click the page button*/
 
$arrow.one('click',go);
 
$arrow.one('click',go);
 
function go(){
 
function go(){
Line 135: Line 262:
 
};
 
};
 
 
−
/*响应鼠标*/
+
/*Response mouse*/
 
$wrap.one('mousewheel',mouse_);
 
$wrap.one('mousewheel',mouse_);
 
function mouse_(event){
 
function mouse_(event){
Line 144: Line 271:
 
};
 
};
 
 
−
/*响应键盘上下键*/
+
/*Response keyboard keys*/
 
$(document).one('keydown',k);
 
$(document).one('keydown',k);
 
function k(event){
 
function k(event){

Revision as of 11:12, 5 August 2015

<!doctype html> indexdemo

<div class="indexNavLogo bg100"></div>
home project measurement modeling human practice notebook team
Abstract
Gene regulation has typically employed chemically mediated expression systems, which are slow and could be limited by medium during drug diffusion. The development of remote regulation systems that could response to physical signals is in demand. This summer, we are trying to design a platform responsed to electromagnetic signal. This platform is composed of 2 sessions : magnetic receiver and thermosensitive regulator.
Receiver
For magnetic receiver, we chose ferritin, the iron-storage protein in organisms, which could synthesize ferric oxihydroxide core in its hollow protein shell. When exposed to electromagnetic field, the ferric oxihydroxide core would be heated, which would trigger thermosensitive regulator.
Regulator
For thermosensitive regulator, we chose RNA thermometer and constructed a thermosensitive T7 RNA polymerase. RNA thermometer is a structured RNA which could expose RBS only when heated. The thermosensitive T7 RNA polymerase is a normal T7 RNA polymerase at the selected locus of which was inserted by a temperature-sensitive intein, which could self-splice at specific temperature.
Achievement
123
      follow us on Facebook@IGEM OUC
            mail to:oucigem@163.com
https://www.facebook.com/oucigem