Team:SEU A

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
<html>
<html>
-
<a href="https://2012.igem.org/wiki/index.php?title=Team:SEU_A&action=edit">Edit</a>
+
<head>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
<meta name="description" content="Pretty Simple Content Slider with jQuery and CSS3" />
-
This is a template page. READ THESE INSTRUCTIONS.
+
<meta name="keywords" content="jquery,css3, content slider, slide, auto-play"/>
 +
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
 +
<style>
 +
* { margin:0; padding:0; }
 +
body { font-family:Arial; background:#C1C7D5 url(background.jpg) no-repeat top center; width:960px; }
 +
a.back { background:transparent url(back.png) no-repeat top left; position:fixed; width:150px; height:27px; outline:none; bottom:0px; left:0px; }
 +
#content { margin:150px auto 10px auto; }
 +
.reference { clear:both; width:800px; margin:30px auto; }
 +
.reference p a { text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#666; text-decoration:none; font-size:10px; }
 +
.reference p a:hover { color:#333; }
 +
.word1{
 +
color:#000;
 +
font-family:"Times New Roman", Times, serif;
 +
font-variant:small-caps;
 +
font-size:48px;
 +
position:relative;
 +
top:100px;
 +
left:90px;
 +
}
 +
.word2{
 +
color:#000;
 +
font-family:"Times New Roman", Times, serif;
 +
font-size:18px;
 +
position:relative;
 +
top:200px;
 +
left:260px;
 +
}
 +
.rotator{
 +
    background-color:#222;
 +
    width:800px;
 +
    height:300px;
 +
    margin:0px auto;
 +
top:80px;
 +
left:180px;
 +
    position:relative;
 +
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
 +
    color:#fff;
 +
    text-transform:uppercase;
 +
    letter-spacing:-1px;
 +
    border:3px solid #f0f0f0;
 +
    overflow:hidden;
 +
    -moz-box-shadow:0px 0px 10px #222;
 +
    -webkit-box-shadow:0px 0px 10px #222;
 +
    box-shadow:0px 0px 10px #222;
 +
}
 +
img.bg{
 +
    position:absolute;
 +
    top:0px;
 +
    left:0px;
 +
}
 +
.rotator ul{
 +
    list-style:none;
 +
    position:absolute;
 +
    right:0px;
 +
    top:0px;
 +
    margin-top:6px;
 +
    z-index:999999;
 +
}
 +
.rotator ul li{
 +
    display:block;
 +
    float:left;
 +
    clear:both;
 +
    width:260px;
 +
}
 +
.rotator ul li a{
 +
    width:230px;
 +
    float:right;
 +
    clear:both;
 +
    padding-left:10px;
 +
    text-decoration:none;
 +
    display:block;
 +
    height:52px;
 +
    line-height:52px;
 +
    background-color:#222;
 +
    margin:1px -20px 1px 0px;
 +
    opacity:0.7;
 +
    color:#f0f0f0;
 +
    font-size:20px;
 +
    border:2px solid #000;
 +
    border-right:none;
 +
    outline:none;
 +
    text-shadow:-1px 1px 1px #000;
 +
    -moz-border-radius:10px 0px 0px 20px;
 +
    -webkit-border-top-left-radius:10px;
 +
    -webkit-border-bottom-left-radius:20px;
 +
    border-top-left-radius:10px;
 +
    border-bottom-left-radius:20px;
 +
}
 +
.rotator ul li a:hover{
 +
      text-shadow:0px 0px 2px #fff;
 +
}
 +
.rotator .heading{
 +
    position:absolute;
 +
    top:0px;
 +
    left:0px;
 +
    width:500px;
 +
}
 +
.rotator .heading h1{
 +
    text-shadow:-1px 1px 1px #555;
 +
    font-weight:normal;
 +
    font-size:46px;
 +
    padding:20px;
 +
}
 +
.rotator .description{
 +
    width:500px;
 +
    height:80px;
 +
    position:absolute;
 +
    bottom:0px;
 +
    left:0px;
 +
    padding:20px;
 +
    background-color:#222;
 +
    -moz-border-radius:0px 10px 0px 0px;
 +
    -webkit-border-top-right-radius:10px;
 +
    border-top-right-radius:10px;
 +
    opacity:0.7;
 +
    border-top:2px solid #000;
 +
    border-right:2px solid #000;
 +
}
 +
.rotator .description p{
 +
    text-shadow:-1px 1px 1px #000;
 +
    text-transform:none;
 +
    letter-spacing:normal;
 +
    line-height:26px;
 +
}
 +
a.more{
 +
    color:orange;
 +
    text-decoration:none;
 +
    text-transform:uppercase;
 +
    font-size:10px;
 +
}
 +
a.more:hover{
 +
    color:#fff;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<div id="title">
 +
<div class="word1">
 +
Southeast University 2012 iGEM Team A
 +
</div>
</div>
</div>
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
<div id="H2">
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
+
<div class="word2">
 +
This is a traditional undergraduate iGEM competition team from Southeast University of China.
 +
</div>
</div>
</div>
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
<div id="content"> <a class="back" href=""></a>
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace.
+
  <div class="rotator">
 +
    <ul id="rotmenu">
 +
      <li> <a href="rot1">Project</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">1.jpg</div>
 +
          <div class="info_heading">Project Introduction</div>
 +
          <div class="info_description"> As we all know, since the discovery of penicillin, people gradually rely on various antibiotics to kill bacteria. However, the adaptation ability of bacteria that of responding to these medicines is out of our imagination , the speed of production of resistance to drugs is faster than creating a new effective drug as well. <a href="https://2011.igem.org/Team:Peking_S" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
      <li> <a href="rot2">Model</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">2.jpg</div>
 +
          <div class="info_heading">Math Model</div>
 +
          <div class="info_description">Comming Soon...<a href="https://2011.igem.org/Team:ZJU-China" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
      <li> <a href="rot3">Experiment</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">3.jpg</div>
 +
          <div class="info_heading">Working In Lab</div>
 +
          <div class="info_description"> Coming Soon.... <a href="#" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
      <li> <a href="rot4">Human Practice</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">4.jpg</div>
 +
          <div class="info_heading">Colorful Activities</div>
 +
          <div class="info_description"> Comming Soon... <a href="#" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
      <li> <a href="rot5">About Us</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">5.jpg</div>
 +
          <div class="info_heading">Members</div>
 +
          <div class="info_description"> Coming Soon... <a href="#" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
    </ul>
 +
    <div id="rot1"> <img src="B1.jpg" width="800" height="300" class="bg" alt=""/>
 +
      <div class="heading">
 +
        <h1>SEU_iGEM 2012 TEAM_A</h1>
 +
      </div>
 +
      <div class="description">
 +
        <p>Welcome to SEU_A's Wiki~</p>
 +
      </div>
 +
    </div>
 +
  </div>
</div>
</div>
-
</div>
 
-
</html>
 
-
<!-- *** End of the alert box *** -->
+
<!-- The JavaScript -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
jQuery.extend( jQuery.easing,
-
!align="center"|[[Team:SEU_A|Home]]
+
{
-
!align="center"|[[Team:SEU_A/Team|Team]]
+
def: 'easeOutQuad',
-
!align="center"|[https://igem.org/Team.cgi?year=2012&team_name=SEU_A Official Team Profile]
+
swing: function (x, t, b, c, d) {
-
!align="center"|[[Team:SEU_A/Project|Project]]
+
//alert(jQuery.easing.default);
-
!align="center"|[[Team:SEU_A/Parts|Parts Submitted to the Registry]]
+
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
-
!align="center"|[[Team:SEU_A/Modeling|Modeling]]
+
},
-
!align="center"|[[Team:SEU_A/Notebook|Notebook]]
+
easeInQuad: function (x, t, b, c, d) {
-
!align="center"|[[Team:SEU_A/Safety|Safety]]
+
return c*(t/=d)*t + b;
-
!align="center"|[[Team:SEU_A/Attributions|Attributions]]
+
},
-
|}
+
easeOutQuad: function (x, t, b, c, d) {
-
 
+
return -c *(t/=d)*(t-2) + b;
-
 
+
},
-
{|align="justify"
+
easeInOutQuad: function (x, t, b, c, d) {
-
|You can write a background of your team here. Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
+
if ((t/=d/2) < 1) return c/2*t*t + b;
-
 
+
return -c/2 * ((--t)*(t-2) - 1) + b;
-
''Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)''
+
},
-
 
+
easeInCubic: function (x, t, b, c, d) {
-
{| width="62%" align="center"
+
return c*(t/=d)*t*t + b;
-
!align="center"|[[File:Pic 2.jpg]]
+
},
-
{| style="font-family:times;color:green" align="center"
+
easeOutCubic: function (x, t, b, c, d) {
-
!align="center"|[[Pic.1 Project Introduction]]
+
return c*((t=t/d-1)*t*t + 1) + b;
-
 
+
},
-
{| width="62%" align="center"
+
easeInOutCubic: function (x, t, b, c, d) {
-
!align="center"|[[File:In the lab.png]]
+
if ((t/=d/2) < 1) return c/2*t*t*t + b;
-
{| style="font-family:times;color:green" align="center"
+
return c/2*((t-=2)*t*t + 2) + b;
-
!align="center"|[[Pic.2 SEU_A Discussing In the Lab]]
+
},
-
 
+
easeInQuart: function (x, t, b, c, d) {
-
 
+
return c*(t/=d)*t*t*t + b;
-
<!--- The Mission, Experiments --->
+
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b; if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
 +
</script>
 +
<script type="text/javascript">
 +
            $(function() {
 +
                var current = 1;
 +
               
 +
                var iterate = function(){
 +
                    var i = parseInt(current+1);
 +
                    var lis = $('#rotmenu').children('li').size();
 +
                    if(i>lis) i = 1;
 +
                    display($('#rotmenu li:nth-child('+i+')'));
 +
                }
 +
                display($('#rotmenu li:first'));
 +
                var slidetime = setInterval(iterate,3000);
 +
 +
                $('#rotmenu li').bind('click',function(e){
 +
                    clearTimeout(slidetime);
 +
                    display($(this));
 +
                    e.preventDefault();
 +
                });
 +
 +
                function display(elem){
 +
                    var $this = elem;
 +
                    var repeat = false;
 +
                    if(current == parseInt($this.index() + 1))
 +
                        repeat = true;
 +
 +
                    if(!repeat)
 +
                        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
 +
                            $(this).animate({'opacity':'0.7'},700);
 +
                        });
 +
 +
                    current = parseInt($this.index() + 1);
 +
 +
                    var elem = $('a',$this);
 +
                   
 +
                        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
 +
 +
                    var info_elem = elem.next();
 +
                    $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
 +
                        $('h1',$(this)).html(info_elem.find('.info_heading').html());
 +
                        $(this).animate({'left':'0px'},400,'easeInOutQuad');
 +
                    });
 +
 +
                    $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
 +
                        $('p',$(this)).html(info_elem.find('.info_description').html());
 +
                        $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
 +
                    })
 +
                    $('#rot1').prepend(
 +
                    $('<img/>',{
 +
                        style : 'opacity:0',
 +
                        className : 'bg'
 +
                    }).load(
 +
                    function(){
 +
                        $(this).animate({'opacity':'1'},600);
 +
                        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
 +
                            $(this).remove();
 +
                        });
 +
                    }
 +
                ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
 +
                );
 +
                }
 +
            });
 +
        </script>
 +
</body>
 +
</html>

Revision as of 09:48, 27 August 2012

Southeast University 2012 iGEM Team A
This is a traditional undergraduate iGEM competition team from Southeast University of China.
  • Project
    1.jpg
    Project Introduction
    As we all know, since the discovery of penicillin, people gradually rely on various antibiotics to kill bacteria. However, the adaptation ability of bacteria that of responding to these medicines is out of our imagination , the speed of production of resistance to drugs is faster than creating a new effective drug as well. Read more
  • Model
    2.jpg
    Math Model
    Comming Soon...Read more
  • Experiment
    3.jpg
    Working In Lab
    Coming Soon.... Read more
  • Human Practice
    4.jpg
    Colorful Activities
    Comming Soon... Read more
  • About Us
    5.jpg
    Members
    Coming Soon... Read more

SEU_iGEM 2012 TEAM_A

Welcome to SEU_A's Wiki~

Retrieved from "http://2012.igem.org/Team:SEU_A"