Team:Fudan/material.html

From 2013.igem.org

(Difference between revisions)
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>
-
<link rel="stylesheet" type="text/css" href="http://new87.guangstreet.com/css/reset.css" media="all" />
+
        <STYLE type="text/css">
-
<link rel="stylesheet" type="text/css" href="http://new87.guangstreet.com/css/style.css" media="all" />
+
     
-
<script type="text/javascript" src="http://new87.guangstreet.com/js/jquery-1.9.min.js"></script>
+
    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}
-
<script type="text/javascript" src="http://new87.guangstreet.com/js/main.js"></script>
+
 
 +
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 type="text/javascript" >
 +
 +
 
 +
 
 +
 
 +
 
 +
$(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>
 +
 
</head>
</head>
 +
<body>
<body>
<div id="total-wrap">
<div id="total-wrap">

Revision as of 17:56, 28 October 2013

ALeader

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