Team:Fudan/bistable system.html

From 2013.igem.org

(Difference between revisions)
 
(3 intermediate revisions not shown)
Line 3: Line 3:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ALeader</title>
<title>ALeader</title>
-
        <STYLE type="text/css">
+
<link rel="stylesheet"  type="text/css" href="http://fudanigem.phx-2.ifreeurl.com/css/igem.css">
-
     
+
-
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
+
-
 
+
-
body{
+
-
background-color:#eaf0f4;
+
-
}
+
-
a{
+
-
text-decoration: none;
+
-
color: white;
+
-
}
+
-
a:hover{
+
-
text-decoration: none;
+
-
color: white;
+
-
}
+
-
a:active{
+
-
text-decoration: none;
+
-
color: white;
+
-
}
+
-
a:visited{
+
-
text-decoration: none;
+
-
color: white;
+
-
}
+
-
#top-section{
+
-
height: 0px;
+
-
border:none;
+
-
}
+
-
#search-controls{
+
-
display: none;
+
-
}
+
-
#p-logo{
+
-
display: none;
+
-
}
+
-
#total-wrap{
+
-
position:absolute;
+
-
width: 1215px;
+
-
left: 50%;
+
-
right: 50%;
+
-
margin-left: -607px;
+
-
color: white;
+
-
}
+
-
#header{
+
-
height: 263px;
+
-
background-image:url("../img/banner.png");
+
-
background-position: top center;
+
-
background-repeat: no-repeat;
+
-
border-radius:3px;
+
-
overflow: hidden;
+
-
width: 1214px;
+
-
}
+
-
#emp{
+
-
height:200px;
+
-
}
+
-
#top-menu{
+
-
display: inline-block;
+
-
padding-left:20px;
+
-
background-color: #394264;
+
-
width: 1195px;
+
-
 
+
-
}
+
-
@font-face {
+
-
font-family: ubuntu;
+
-
src:url(Ubuntu-R.ttf);
+
-
}
+
-
.top-menu-each{
+
-
height: 63px;
+
-
+
-
font-family: ubuntu,"宋体";
+
-
color: white;
+
-
font-size: 21px;
+
-
float: left;
+
-
cursor: pointer;
+
-
}
+
-
 
+
-
.top-menu-each p{
+
-
float: left;
+
-
padding-right: 30px;
+
-
padding-left: 30px;
+
-
line-height: 63px;
+
-
}
+
-
.arrow{
+
-
float: left;
+
-
background-image: url("../img/arrow.png");
+
-
line-height: 63px;
+
-
width: 12px;
+
-
height: 9px;
+
-
margin-left: 9px;
+
-
margin-right: 9px;
+
-
margin-top: 30px;
+
-
position: absolute;
+
-
 
+
-
}
+
-
.top-menu-each:hover{
+
-
background-color: #50597B;
+
-
border-bottom-style:solid;
+
-
border-bottom-width: 2px;
+
-
border-bottom-color:#11a8ab;
+
-
height: 61px;
+
-
+
-
}
+
-
.top-menu-each.click{
+
-
background-color: #50597B;
+
-
border-bottom-style:solid;
+
-
border-bottom-width: 2px;
+
-
border-bottom-color:#11a8ab;
+
-
height: 61px;
+
-
}
+
-
.top-menu-sub{
+
-
position: absolute;
+
-
margin-top: 63px;
+
-
z-index: 10;
+
-
min-width: 215px;
+
-
}
+
-
.top-menu-sub li{
+
-
background-color: #394264;
+
-
border-top-style: solid;
+
-
border-bottom-style: solid;
+
-
border-top-width: 1px;
+
-
border-bottom-width: 1px;
+
-
border-top-color: #11a8ab;
+
-
border-bottom-color: #11a8ab;
+
-
padding-left: 30px;
+
-
padding-right: 20px;
+
-
height: 55px;
+
-
line-height: 55px;
+
-
cursor:pointer;
+
-
}
+
-
.top-menu-sub li:hover{
+
-
background-color: #50597B;
+
-
}
+
-
#big-photo{
+
-
margin-top: 65px;
+
-
height: 500px;
+
-
width: 1214px;
+
-
overflow: hidden;
+
-
}
+
-
#big-photo img{
+
-
height: 500px;
+
-
width: 1214px;
+
-
position: absolute;
+
-
 
+
-
}
+
-
#big-photo-hover{
+
-
height: 130px;
+
-
padding-left: 35px;
+
-
padding-right: 10px;
+
-
background-image: url('../img/big-photo-hover.png');
+
-
background-repeat: no-repeat;
+
-
margin-top: -130px;
+
-
position: absolute;
+
-
margin-top: 370px;
+
-
width: 1169px;
+
-
}
+
-
@font-face {
+
-
font-family: helveticamd;
+
-
src:url(HelveticaNeueLTStd-Md.otf);
+
-
}
+
-
@font-face {
+
-
font-family: helveticalt;
+
-
src:url(HelveticaNeueLTStd-Lt.otf);
+
-
}
+
-
#big-photo-hover .header{
+
-
font-size: 30px;
+
-
line-height: 30px;
+
-
font-family: helveticalmd,"微软雅黑";
+
-
font-weight: bold;
+
-
padding-top: 25px;
+
-
margin-bottom: 10px;
+
-
}
+
-
#big-photo-hover .content{
+
-
font-size: 23px;
+
-
line-height: 23px;
+
-
font-family: helveticallt,"微软雅黑";
+
-
}
+
-
#big-photo-wrap{
+
-
position: absolute;
+
-
width: 1214px;
+
-
height: 500px;
+
-
overflow: hidden;
+
-
}
+
-
#small-photo{
+
-
margin-top: 15px;
+
-
display: inline-block;
+
-
margin-bottom: 335px;
+
-
}
+
-
.small-photo-each{
+
-
width: 351px;
+
-
height: 410px;
+
-
padding-top: 10px;
+
-
padding-bottom:5px;
+
-
padding-left: 10px;
+
-
padding-right: 10px;
+
-
margin-right: 51px;
+
-
float: left;
+
-
background-color: white;
+
-
}
+
-
.small-photo-each img{
+
-
width: 351px;
+
-
height: 410px;
+
-
}
+
-
.small-photo-each.last{
+
-
margin-right: 0px;
+
-
}
+
-
#footer{
+
-
+
-
height: 180px;
+
-
background-color: #394264;
+
-
border-top-left-radius:8px;
+
-
border-top-right-radius:8px;
+
-
}
+
-
#main-content{
+
-
        position:absolute;
+
-
margin-top: 40px;
+
-
display: inline-block;
+
-
}
+
-
#left-bar{
+
-
width: 225px;
+
-
border-radius: 3px;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
}
+
-
.left-bar-each{
+
-
height: 60px;
+
-
background-color: #394264;
+
-
font-family: ubuntu,"宋体";
+
-
font-size: 18px;
+
-
line-height: 60px;
+
-
padding-left: 30px;
+
-
cursor: pointer;
+
-
border-bottom-style: solid;
+
-
border-bottom-color: #1f253d;
+
-
border-bottom-width: 1px;
+
-
}
+
-
.left-bar-each:hover{
+
-
background-color: #50597b;
+
-
}
+
-
.left-bar-each.top{
+
-
background-color: #38b7c4;
+
-
text-align:center;
+
-
padding-left: 0px;
+
-
}
+
-
.left-bar-each.top:hover{
+
-
background-color: #38b7c4;
+
-
}
+
-
.left-bar-sub .left-bar-each{
+
-
padding-left: 90px;
+
-
}
+
-
#middle-photo{
+
-
float: left;
+
-
margin-bottom: 445px;
+
-
}
+
-
.middle-photo-each{
+
-
padding:9px 9px 9px 9px;
+
-
background-color: white;
+
-
margin-bottom: 15px;
+
-
margin-left: 250px;
+
-
 
+
-
}
+
-
.middle-photo-each .middle-content{
+
-
height: 400px;
+
-
width: 947px;
+
-
}
+
-
.middle-content img{
+
-
float: left;
+
-
}
+
-
#examplepic{
+
-
width: 100px;
+
-
height:60px;
+
-
}
+
-
.middle-content p{
+
-
color: black;
+
-
font-size: 16px;
+
-
font-family: "微软雅黑";
+
-
line-height: 20px;
+
-
}
+
-
#team-content{
+
-
margin-top: 15px;
+
-
margin-bottom: 95px;
+
-
}
+
-
.team-photo img{
+
-
width: 1215px;
+
-
}
+
-
.team-photo{
+
-
margin-bottom: -2px;
+
-
}
+
-
#top{
+
-
background-image:url('../img/top.png');
+
-
width: 57px;
+
-
height: 57px;
+
-
position: fixed;
+
-
top: 80%;
+
-
margin-left: 1285px;
+
-
cursor: pointer;
+
-
}
+
-
#logo{
+
-
position: absolute;
+
-
background-image: url("../img/logo.png");
+
-
width: 154px;
+
-
height: 147px;
+
-
margin-left: 1000px;
+
-
margin-top: 30px;
+
-
cursor: pointer;
+
-
}
+
-
#footer-box{
+
-
display: none;
+
-
}
+
-
.firstHeading{
+
-
display: none;
+
-
}
+
-
#content{
+
-
border:none;
+
-
background: none;
+
-
}
+
-
 
+
-
        </STYLE>
+
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
-
<script type="text/javascript" >
+
<script src="http://fudanigem.phx-2.ifreeurl.com/js/igem.js">
-
+
-
 
+
-
 
+
-
 
+
-
 
+
-
$(document).ready(function(){
+
-
 
+
-
var imageload=new Array("img/DSQ.png","img/HCX.png"); //此处输入大图地址
+
-
var datatemp=function(){ //保存大图介绍的结构
+
-
this.head;
+
-
this.content;
+
-
}
+
-
var data1=new datatemp();
+
-
var data2=new datatemp();
+
-
data1.head="Background of Leader RNA";
+
-
data1.content="Riboswitches are regulatory RNAs that regulate gene expression by binding small molecule metabolites. Our Aleader riboswitch is such kind of regulatory parts that is induced by aminoglycoside drug.";
+
-
data2.head="this is header2";
+
-
data2.content="this is content2";
+
-
var imageintro=new Array(data1,data2); //保存介绍的数组
+
-
var imagecount=0;
+
-
+
-
var init=function(){
+
-
$('.arrow').hide();
+
-
$('.top-menu-sub').hide();
+
-
+
-
}
+
-
var bind=function(){
+
-
$("#top").hide();
+
-
$(document).scroll(function(){
+
-
if($(document).scrollTop()>308){
+
-
$("#left-bar").css("position","fixed");
+
-
$("#left-bar").css("top","0%");
+
-
}
+
-
else{
+
-
console.log(1);
+
-
$("#left-bar").css("position","absolute");
+
-
$("#left-bar").css("top","");
+
-
 
+
-
};
+
-
})
+
-
$('.top-menu-each').hover(function()
+
-
{
+
-
$('.top-menu-each.click .arrow').hide();
+
-
$('.top-menu-each.click').removeClass('click');
+
-
$(this).addClass('click');
+
-
$(this).find('.arrow').show();
+
-
$('.top-menu-sub.show').hide();
+
-
$('.top-menu-sub.show').removeClass('show');
+
-
$(this).find('.top-menu-sub').addClass('show');
+
-
$(this).find('.top-menu-sub').show();
+
-
+
-
+
-
+
-
+
-
},function(){
+
-
$(this).removeClass('click');
+
-
$(this).find('.arrow').hide();
+
-
$(this).find('.top-menu-sub').removeClass('show');
+
-
$(this).find('.top-menu-sub').hide();
+
-
}
+
-
)
+
-
 
+
-
+
-
}
+
-
var changepic=function(){
+
-
imagecount=imagecount+1;
+
-
if(imagecount==imageload.length){
+
-
imagecount=imagecount-imageload.length;
+
-
}
+
-
$('#big-photo-hover').fadeOut(function(){
+
-
$('#big-photo-wrap').prepend('<img src='+imageload[imagecount]+'>');
+
-
$('#big-photo img:eq(0)').css('margin-left','-1214px');
+
-
$('#big-photo img:eq(0)').animate({marginLeft:'0px'},3000);
+
-
$('#big-photo img:eq(1)').animate({marginLeft:'1214px'},3000,function(){
+
-
$('#big-photo img:eq(1)').remove();
+
-
$('#big-photo-hover .header').html(imageintro[imagecount].head);
+
-
$('#big-photo-hover .content').html(imageintro[imagecount].content);
+
-
$('#big-photo-hover').fadeIn();
+
-
});
+
-
})
+
-
+
-
+
-
}
+
-
$(window).scroll(function(){
+
-
min_height=window.screen.availHeight ;
+
-
var s = $(window).scrollTop();
+
-
if( s > 0){
+
-
if(!$("#top").hasClass("hide"))
+
-
$('#top').fadeIn(100);
+
-
}else{
+
-
$('#top').fadeOut(200);
+
-
};
+
-
});
+
-
//top按钮控制
+
-
+
-
$('#top').click(function(){
+
-
$('html,body').animate({scrollTop:0},300);
+
-
+
-
});
+
-
setInterval(changepic,8000);
+
-
init();
+
-
bind();
+
-
})
+
</script>
</script>
Line 473: Line 56:
</ul>
</ul>
</div>
</div>
 +
</div>
 +
                                <div class="top-menu-each">
 +
<a href="https://2013.igem.org/Team:Fudan/result.html"><p>Result</p></a>
</div>
</div>
<div class="top-menu-each">
<div class="top-menu-each">
Line 515: Line 101:
<div id="middle-photo">
<div id="middle-photo">
<div class="middle-photo-each">
<div class="middle-photo-each">
-
<iframe src="http://new87.guangstreet.com/bistable.htm" style="
+
<iframe src="http://fudanigem.phx-2.ifreeurl.com/bistable.htm" style="
     width: 850px;
     width: 850px;
     height: 2000px;
     height: 2000px;

Latest revision as of 03:23, 29 October 2013

ALeader

Retrieved from "http://2013.igem.org/Team:Fudan/bistable_system.html"