Team:NJU NJUT China/team

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> - →hiding the top section: body{position:absolute; top:0px; width:100%; height:1380px;} #top-section{ height:0px; border:none; width:980px; ...")
Line 81: Line 81:
}
}
/*end of footer*/
/*end of footer*/
 +
 +
/*guide*/
 +
ul#navigation {
 +
    position: absolute;
 +
left: 197px;
 +
    top: 242px;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    right: 10px;
 +
    list-style: none;
 +
    z-index:3;
 +
    width:960px;
 +
}
 +
ul#navigation li {
 +
  width:100px;
 +
    display:inline;
 +
    float:left;   
 +
}
 +
ul#navigation li a {
 +
    display: block;
 +
width:100px;
 +
    float:left;
 +
    margin-top: -2px;
 +
    background-color:#FF0000;
 +
    background-repeat:no-repeat;
 +
    background-position:50% 10px;
 +
    border:1px solid #BDDCEF;
 +
    -moz-border-radius:0px 0px 10px 10px;
 +
    -webkit-border-bottom-right-radius: 10px;
 +
    -webkit-border-bottom-left-radius: 10px;
 +
    -khtml-border-bottom-right-radius: 10px;
 +
    -khtml-border-bottom-left-radius: 10px;
 +
    text-decoration:none;
 +
    text-align:center;
 +
    padding-top:80px;
 +
    opacity: 0.7;
 +
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
 +
}
 +
ul#navigation li a:hover{
 +
    background-color:#CAE3F2;
 +
}
 +
ul#navigation li a span{
 +
    letter-spacing:2px;
 +
    font-size:11px;
 +
    color:#000000;
 +
    text-shadow: 0 -1px 1px #fff;     
 +
}
 +
ul#navigation .home a{
 +
    background-image: url(http://igem.3vfree.us/images/home.png);
 +
}
 +
ul#navigation .about a      {
 +
    background-image: url(http://igem.3vfree.us/images/team.png);
 +
}
 +
ul#navigation .search a      {
 +
    background-image: url(http://igem.3vfree.us/images/search.png);
 +
}
 +
ul#navigation .podcasts a      {
 +
    background-image: url(http://igem.3vfree.us/images/ipod.png);
 +
}
 +
ul#navigation .rssfeed a  {
 +
    background-image: url(http://igem.3vfree.us/images/rss.png);
 +
}
 +
ul#navigation .photos a    {
 +
    background-image: url(http://igem.3vfree.us/images/camera.png);
 +
}
 +
ul#navigation .contact a    {
 +
    background-image: url(http://igem.3vfree.us/images/mail.png);
 +
}
 +
 +
/*end of guide*/
 +
 +
 +
/*----*/
 +
*{
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
body {
 +
margin: 0;
 +
padding: 0;
 +
background:urlurl(http://igem.3vfree.us/images/bg1.jpg) repeat-x top left;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 12px;
 +
color: #787878;
 +
}
 +
 +
h1, h2, h3 {
 +
margin: 0;
 +
padding: 0;
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
font-weight: normal;
 +
color: #181818;
 +
}
 +
 +
h1 {
 +
font-size: 2em;
 +
}
 +
 +
h2 {
 +
font-size: 1.8em;
 +
font-family:Verdana, Geneva, sans-serif;
 +
}
 +
 +
h3 {
 +
font-size: 1.6em;
 +
}
 +
 +
p, ul, ol {
 +
margin-top: 0;
 +
line-height: 180%;
 +
}
 +
 +
ul, ol {
 +
}
 +
 +
a {
 +
text-decoration: none;
 +
color: #B94E0E;
 +
}
 +
 +
a:hover {
 +
}
 +
 +
#wrapper {
 +
margin: 0 auto;
 +
padding: 0;
 +
background:urlurl(http://igem.3vfree.us/images/img05.jpg) repeat-x top left;
 +
}
 +
 +
/* Header */
 +
 +
#header-wrapper {
 +
z-index:10;
 +
}
 +
 +
 +
#header {
 +
position: absolute;
 +
left:197px;
 +
list-style: none;
 +
z-index:10;
 +
width: 960px;
 +
height: 240px;
 +
margin: 0 auto;
 +
background:url(http://igem.3vfree.us/images/logo2.jpg) no-repeat left top;
 +
top: 1px;
 +
}
 +
 +
/* Logo */
 +
 +
#logo {
 +
float: left;
 +
height: 240px;
 +
margin: 0;
 +
padding: 0px;
 +
color: #FFFFFF;
 +
}
 +
 +
#logo h1, #logo p {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
#logo h1 {
 +
float: left;
 +
padding-left: 25px;
 +
letter-spacing: -1px;
 +
font-size: 2.6em;
 +
}
 +
 +
#logo p {
 +
float: left;
 +
margin: 0;
 +
padding: 12px 0 0 10px;
 +
font: normal 14px Georgia, "Times New Roman", Times, serif;
 +
font-style: italic;
 +
}
 +
 +
#logo a {
 +
    position: relative;
 +
    left: 350px;
 +
border: none;
 +
background: none;
 +
text-decoration: none;
 +
color: #000000;
 +
}
 +
 +
 +
/* Search */
 +
 +
 +
 +
/* Menu */
 +
 +
 +
/* Page */
 +
 +
#page {
 +
    position: absolute;
 +
top:705px;
 +
left:194px;
 +
width: 960px;
 +
margin: 0 auto;
 +
padding: 0;
 +
background:url(https://static.igem.org/mediawiki/igem.org/d/d1/NJU_NJUT_CHINA_img04.jpg) repeat-y left top;
 +
}
 +
 +
#page-bgtop {
 +
}
 +
 +
#page-bgbtm {
 +
padding: 30px 20px 0px 20px;
 +
}
 +
 +
/* Content */
 +
 +
#content {
 +
float: left;
 +
width: 640px;
 +
padding: 0;
 +
}
 +
 +
.post {
 +
}
 +
 +
.post .title {
 +
height: 38px;
 +
padding: 12px 0 0 20px;
 +
letter-spacing: -.5px;
 +
 +
color: #181818;
 +
}
 +
 +
.post .title a {
 +
color: #181818;
 +
font-family:Verdana, Geneva, sans-serif;
 +
border: none;
 +
}
 +
 +
.post .meta {
 +
margin-top: -10px;
 +
padding-bottom: 5px;
 +
padding-left: 20px;
 +
text-align: left;
 +
}
 +
 +
.post .meta a {
 +
}
 +
 +
.post .entry {
 +
text-align: justify;
 +
margin-bottom: 25px;
 +
padding: 30px 20px 10px 20px;
 +
}
 +
 +
.links {
 +
display: block;
 +
width: 130px;
 +
margin: 20px 0px;
 +
padding: 5px;
 +
background:#669;
 +
border-left: 20px solid #666;
 +
text-align: center;
 +
text-transform: uppercase;
 +
font-size: 10px;
 +
color: #FFFFFF;
 +
}
 +
 +
/* Sidebar */
 +
 +
#sidebar {
 +
position:absolute;
 +
left:678px;
 +
top:24px;
 +
float: right;
 +
width: 272px;
 +
padding: 10px 0px 0px 0px;
 +
color: #787878;
 +
height: 665px;
 +
}
 +
 +
#sidebar ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
#sidebar li {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
#sidebar li ul {
 +
margin: 0px 15px;
 +
padding-bottom: 30px;
 +
}
 +
 +
#sidebar li li {
 +
line-height: 35px;
 +
border-bottom: 1px dashed #D1D1D1;
 +
padding-left: 15px;
 +
}
 +
 +
#sidebar li li span {
 +
display: block;
 +
margin-top: -20px;
 +
padding: 0;
 +
font-size: 11px;
 +
font-style: italic;
 +
}
 +
 +
#sidebar h2 {
 +
height: 38px;
 +
padding: 12px 0 0 15px;
 +
letter-spacing: -.5px;
 +
color: #181818;
 +
}
 +
 +
#sidebar p {
 +
margin: 0 0px;
 +
padding: 0px 20px 20px 20px;
 +
text-align: justify;
 +
}
 +
 +
#sidebar a {
 +
border: none;
 +
color: #B94E0E;
 +
}
 +
 +
#sidebar a:hover {
 +
text-decoration: underline;
 +
}
 +
 +
/* Calendar */
 +
 +
#calendar {
 +
}
 +
 +
#calendar_wrap {
 +
padding: 20px;
 +
}
 +
 +
#calendar table {
 +
width: 100%;
 +
}
 +
 +
#calendar tbody td {
 +
text-align: center;
 +
}
 +
 +
#calendar #next {
 +
text-align: right;
 +
}
 +
 +
/* Footer */
 +
 +
#myfooter-wrapper {
 +
position:absolute;
 +
bottom:-1286px;
 +
width: 100%;
 +
background: #231202;
 +
left: 193px;
 +
}
 +
 +
#myfooter {
 +
position:absolute;
 +
width: 960px;
 +
height: 100px;
 +
margin: 0 auto;
 +
padding: 0px 0 15px 0;
 +
background: url(http://igem.3vfree.us/images/img01.jpg) repeat-x left top;
 +
font-family: Arial, Helvetica, sans-serif;
 +
left: 0px;
 +
}
 +
 +
#myfooter p {
 +
margin: 0;
 +
padding-top: 40px;
 +
line-height: normal;
 +
font-size: 9px;
 +
text-transform: uppercase;
 +
text-align: center;
 +
color: #D78983;
 +
}
 +
 +
#myfooter a {
 +
color: #FFDBD9;
 +
}
 +
 +
 +
/*----*/
 +
 +
/*--------------------team image-------------------------------*/
 +
 +
.teammemberimg { float:left; height:150px; width:105px; margin-left:20px;}
 +
.teammemberinfo{float:left;}
 +
.teammemberinfo p{ margin-bottom:-6px;}
 +
 +
/*-------------------------------------------------------------*/
</style>
</style>
</head>
</head>
 +
 +
<body>
 +
<div id="wrapper">
 +
<div id="header">
 +
      <div id="logo">
 +
<h1><a href="#">NJU_NJUT_CHINA</a></h1>
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- end #header -->
 +
        <ul id="navigation">
 +
            <li class="home" style="width: 100px;"><a href=""><span>Home</span></a></li>
 +
            <li class="about" style="width: 115px;"><a href="" style="width:115px;"><span>TEAM</span></a></li>
 +
            <li class="search" style="width: 135px;"><a href="" style="width:135px;"><span>PROJECT</span></a></li>
 +
            <li class="photos" style="width: 150px;"><a href="" style="width:150px;"><span>MODELING</span></a></li>
 +
            <li class="rssfeed" style="width: 115px;"><a href="" style="width:115px;"><span>DATA</span></a></li>
 +
            <li class="podcasts" style="width: 125px;"><a href=""style="width:125px;"><span>SFATY</span></a></li>
 +
            <li class="contact" style="width: 205px;"><a href=""style="width:205px;"><span>HUMANPRACTICE</span></a></li>
 +
  </ul>
 +
 +
<div style="clear: both;">&nbsp;</div>
 +
<!-- end #menu -->
 +
<div id="page" style=" position:absolute;top:270px">
 +
<div id="page-bgtop">
 +
<div id="page-bgbtm">
 +
  <div id="content">
 +
     
 +
     
 +
<div class="post">
 +
  <h2 class="title"><a href="#" >Team Introduction</a></h2>
 +
<p class="meta">photo</p>
 +
  <div class="entry">
 +
<img src="https://static.igem.org/mediawiki/igem.org/1/19/NJU_NJUT_CHINA_Team.jpg" width="600px" height="400px" /> 
 +
<hr />
 +
  </div>
 +
</div>
 +
<div class="post">
 +
  <h2 class="title"><a href="#">Team Members</a> </h2>
 +
  <p>&nbsp;</p>
 +
  <div>
 +
 +
    <div><a name="CaoZhe"><img src="https://static.igem.org/mediawiki/2013/c/c5/Caozhe.jpg
 +
" class="teammemberimg"/> </a></div>
 +
<div class="teammemberinfo">
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name: Cao Zhe   </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;University: Nanjing University</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Major: Life Sciences</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hobby: basketball, movie and music</p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Research interest: cellular signal transduction</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Role: Major coodinator and participant of the experiment, research, financing and</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presentation.</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Remark: For the essence of discovery.</p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
 +
  <p>&nbsp;</p>
 +
</div>
 +
              </div>
 +
                <div style="clear: both;"></div>
 +
                <br />
 +
                <hr />
 +
    </div>
 +
        <br />
 +
 +
                <div class="post">
 +
<div>
 +
  <div><a name="LeiLin"><img src="https://static.igem.org/mediawiki/2013/b/b8/Leilin.jpg"  class="teammemberimg"/></a></div>
 +
<div class="teammemberinfo">
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name: Lei Lin </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;University: Nanjing University</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Major: Life Sciences </p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Description:I am interested in electrochemistry and biomedical engineering research. </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Impressed by the mechanism of CRISPER system, he decided to join the team.  Outside  </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the lab, he is a heavy soccer fan. During the program, he found systems biology became </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part of his motivation to continue pursuing his Ph.D degree. </p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
</div>
 +
                  </div>
 +
                <div style="clear: both;"></div>
 +
                <br />
 +
                <hr />
 +
  </div>
 +
             
 +
              <br />
 +
 
 +
              <div class="post">
 +
<div>
 +
  <div><a name="MinXi"><img src="https://static.igem.org/mediawiki/2013/9/99/Minxi.jpg"  class="teammemberimg"/>            </a></div>
 +
<div class="teammemberinfo">
 +
                          <br />
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name: Min Xi </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;University: Nanjing University</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Major: Life Sciences </p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hobby:Reading&nbsp;&nbsp;Biochemistry&nbsp;&nbsp;Badminton </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Role: Major designer and coordinator of the scheme,experiment and presentation.  </p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
  </div>
 +
                </div>
 +
                <div style="clear: both;"></div>
 +
                <br />
 +
                <hr />
 +
  </div>
 +
             
 +
              <br />
 +
 +
              <div class="post">
 +
<div>
 +
  <div>  <a name="TangJie"><img src="
 +
https://static.igem.org/mediawiki/2013/5/51/Tangjie.png"  class="teammemberimg"/></a></div>
 +
<div class="teammemberinfo">
 +
                          <br />
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name: Tang Jie </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;University: Nanjing University</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Major: Life Sciences </p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hobby:basketball &nbsp;&nbsp;movies &nbsp;&nbsp;Badminton </p>
 +
                          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Role: I mainly help with experiments and collecting information.  </p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
  <p>&nbsp;</p>
 +
  </div>
 +
                </div>
 +
                <div style="clear: both;"></div>
 +
                <br />
 +
                <hr />
 +
  </div>
 +
 +
  </div>
 +
</div>
 +
 +
<div style="clear: both;">&nbsp;</div>
 +
  </div>
 +
<!-- end #content -->
 +
<div id="sidebar">
 +
<ul>
 +
<li>
 +
<h2>Team Information</h2>
 +
<p><strong></strong>Combing the outstanding students from Nanjing University with the excellent students from Nanjing University of Technology, we are going to make the CRISPR/Cas systems work in the yeast cell with the help of the synthetic biology methods and show what we got in our wiki. That is why our team has anothor name-Bioally_Nanjing- except for NJU_NJUT_China.
 +
</p>
 +
  </li>
 +
<li> </li>
 +
<li>
 +
<h2>Team Member</h2>
 +
<ul>
 +
<li><a href="#CaoZhe">Cao Zhe</a></li>
 +
<li><a href="#MinXi">Min Xi</a></li>
 +
<li><a href="#LeiLin">Lei Lin</a></li>
 +
<li><a href="#TangJie">Tang Jie</a></li>
 +
<li><a href="#JinRuiTao">Jin Rui Tao</a></li>
 +
<li><a href="#CaoZhe">Cao Zhe</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
    </div>
 +
<!-- end #sidebar -->
 +
  <div style="clear: both;"></div>
 +
    <div id="footer">
 +
<p><a href="#">NJU_NJUT_CHINA</a>.</p>
 +
  </div>
 +
<!-- end #footer -->
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- end #page -->
 +
</div>
 +
 +
 +
 +
<!-- The JavaScript -->
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 +
        <script type="text/javascript">
 +
(function($) {
 +
$.fn.parallaxSlider = function(options) {
 +
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
 +
return this.each(function() {
 +
var $pxs_container = $(this),
 +
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
 +
 +
//the main slider
 +
var $pxs_slider = $('.pxs_slider',$pxs_container),
 +
//the elements in the slider
 +
$elems = $pxs_slider.children(),
 +
//total number of elements
 +
total_elems = $elems.length,
 +
//the navigation buttons
 +
$pxs_next = $('.pxs_next',$pxs_container),
 +
$pxs_prev = $('.pxs_prev',$pxs_container),
 +
//the bg images
 +
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
 +
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
 +
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
 +
//current image
 +
current = 0,
 +
//the thumbs container
 +
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
 +
//the thumbs
 +
$thumbs = $pxs_thumbnails.children(),
 +
//the interval for the autoplay mode
 +
slideshow,
 +
//the loading image
 +
$pxs_loading = $('.pxs_loading',$pxs_container),
 +
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
 +
 +
//first preload all the images
 +
var loaded = 0,
 +
$images = $pxs_slider_wrapper.find('img');
 +
 +
$images.each(function(){
 +
var $img = $(this);
 +
$('<img/>').load(function(){
 +
++loaded;
 +
if(loaded == total_elems*2){
 +
$pxs_loading.hide();
 +
$pxs_slider_wrapper.show();
 +
 +
//one images width (assuming all images have the same sizes)
 +
var one_image_w = $pxs_slider.find('img:first').width();
 +
 +
/*
 +
need to set width of the slider,
 +
of each one of its elements, and of the
 +
navigation buttons
 +
*/
 +
setWidths($pxs_slider,
 +
$elems,
 +
total_elems,
 +
$pxs_bg1,
 +
$pxs_bg2,
 +
$pxs_bg3,
 +
one_image_w,
 +
$pxs_next,
 +
$pxs_prev);
 +
 +
/*
 +
set the width of the thumbs
 +
and spread them evenly
 +
*/
 +
$pxs_thumbnails.css({
 +
'width' : one_image_w + 'px',
 +
'margin-left' : -one_image_w/2 + 'px'
 +
});
 +
var spaces = one_image_w/(total_elems+1);
 +
$thumbs.each(function(i){
 +
var $this = $(this);
 +
var left = spaces*(i+1) - $this.width()/2;
 +
$this.css('left',left+'px');
 +
 +
if(o.thumbRotation){
 +
var angle = Math.floor(Math.random()*41)-20;
 +
$this.css({
 +
'-moz-transform' : 'rotate('+ angle +'deg)',
 +
'-webkit-transform' : 'rotate('+ angle +'deg)',
 +
'transform' : 'rotate('+ angle +'deg)'
 +
});
 +
}
 +
//hovering the thumbs animates them up and down
 +
$this.bind('mouseenter',function(){
 +
$(this).stop().animate({top:'-10px'},100);
 +
}).bind('mouseleave',function(){
 +
$(this).stop().animate({top:'0px'},100);
 +
});
 +
});
 +
 +
//make the first thumb be selected
 +
highlight($thumbs.eq(0));
 +
 +
//slide when clicking the navigation buttons
 +
$pxs_next.bind('click',function(){
 +
++current;
 +
if(current >= total_elems)
 +
if(o.circular)
 +
current = 0;
 +
else{
 +
--current;
 +
return false;
 +
}
 +
highlight($thumbs.eq(current));
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
o.speed,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
$pxs_prev.bind('click',function(){
 +
--current;
 +
if(current < 0)
 +
if(o.circular)
 +
current = total_elems - 1;
 +
else{
 +
++current;
 +
return false;
 +
}
 +
highlight($thumbs.eq(current));
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
o.speed,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
 +
/*
 +
clicking a thumb will slide to the respective image
 +
*/
 +
$thumbs.bind('click',function(){
 +
var $thumb = $(this);
 +
highlight($thumb);
 +
//if autoplay interrupt when user clicks
 +
if(o.auto)
 +
clearInterval(slideshow);
 +
current = $thumb.index();
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
o.speed,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
 +
 +
 +
/*
 +
activate the autoplay mode if
 +
that option was specified
 +
*/
 +
if(o.auto != 0){
 +
o.circular = true;
 +
slideshow = setInterval(function(){
 +
$pxs_next.trigger('click');
 +
},o.auto);
 +
}
 +
 +
/*
 +
when resizing the window,
 +
we need to recalculate the widths of the
 +
slider elements, based on the new windows width.
 +
we need to slide again to the current one,
 +
since the left of the slider is no longer correct
 +
*/
 +
$(window).resize(function(){
 +
w_w = $(window).width();
 +
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
1,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
 +
}
 +
}).error(function(){
 +
alert('here')
 +
}).attr('src',$img.attr('src'));
 +
});
 +
 +
 +
 +
});
 +
};
 +
 +
//the current windows width
 +
var w_w = $(window).width();
 +
 +
var slide = function(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
speed,
 +
easing,
 +
easingBg){
 +
var slide_to = parseInt(-w_w * current);
 +
$pxs_slider.stop().animate({
 +
left : slide_to + 'px'
 +
},speed, easing);
 +
$pxs_bg3.stop().animate({
 +
left : slide_to/2 + 'px'
 +
},speed, easingBg);
 +
$pxs_bg2.stop().animate({
 +
left : slide_to/4 + 'px'
 +
},speed, easingBg);
 +
$pxs_bg1.stop().animate({
 +
left : slide_to/8 + 'px'
 +
},speed, easingBg);
 +
}
 +
 +
var highlight = function($elem){
 +
$elem.siblings().removeClass('selected');
 +
$elem.addClass('selected');
 +
}
 +
 +
var setWidths = function($pxs_slider,
 +
$elems,
 +
total_elems,
 +
$pxs_bg1,
 +
$pxs_bg2,
 +
$pxs_bg3,
 +
one_image_w,
 +
$pxs_next,
 +
$pxs_prev){
 +
/*
 +
the width of the slider is the windows width
 +
times the total number of elements in the slider
 +
*/
 +
var pxs_slider_w = w_w * total_elems;
 +
$pxs_slider.width(pxs_slider_w + 'px');
 +
//each element will have a width = windows width
 +
$elems.width(w_w + 'px');
 +
/*
 +
we also set the width of each bg image div.
 +
The value is the same calculated for the pxs_slider
 +
*/
 +
$pxs_bg1.width(pxs_slider_w + 'px');
 +
$pxs_bg2.width(pxs_slider_w + 'px');
 +
$pxs_bg3.width(pxs_slider_w + 'px');
 +
 +
/*
 +
both the right and left of the
 +
navigation next and previous buttons will be:
 +
windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
 +
*/
 +
var position_nav = w_w/2 - one_image_w/2 + 3;
 +
$pxs_next.css('right', position_nav + 'px');
 +
$pxs_prev.css('left', position_nav + 'px');
 +
}
 +
 +
$.fn.parallaxSlider.defaults = {
 +
auto : 0, //how many seconds to periodically slide the content.
 +
//If set to 0 then autoplay is turned off.
 +
speed : 1000,//speed of each slide animation
 +
easing : 'jswing',//easing effect for the slide animation
 +
easingBg : 'jswing',//easing effect for the background animation
 +
circular : true,//circular slider
 +
thumbRotation : true//the thumbs will be randomly rotated
 +
};
 +
//easeInOutExpo,easeInBack
 +
})(jQuery);
 +
</script>
 +
 +
<script type="text/javascript">
 +
$(function() {
 +
var $pxs_container = $('#pxs_container');
 +
$pxs_container.parallaxSlider();
 +
});
 +
        </script>
 +
<script type="text/javascript">
 +
            $(function() {
 +
                var d=300;
 +
                $('#navigation a').each(function(){
 +
                    $(this).stop().animate({
 +
                        'marginTop':'-80px'
 +
                    },d+=150);
 +
                });
 +
 +
                $('#navigation > li').hover(
 +
                function () {
 +
                    $('a',$(this)).stop().animate({
 +
                        'marginTop':'-2px'
 +
                    },200);
 +
                },
 +
                function () {
 +
                    $('a',$(this)).stop().animate({
 +
                        'marginTop':'-80px'
 +
                    },200);
 +
                }
 +
            );
 +
            });
 +
 +
 +
 +
 +
function $aa(obj)
 +
{
 +
if(obj.className == "aa")
 +
{
 +
obj.className = "bb";
 +
}
 +
else
 +
obj.className = "aa";
 +
}
 +
function unfold(element){
 +
var temp=document.getElementById(element);
 +
$aa(temp);
 +
}
 +
        </script>
 +
</body>
</html>
</html>

Revision as of 10:58, 25 August 2013

 

Team Introduction

photo

Team Members

 

      Name: Cao Zhe

      University: Nanjing University

      Major: Life Sciences

      Hobby: basketball, movie and music

 

      Research interest: cellular signal transduction

      Role: Major coodinator and participant of the experiment, research, financing and

                  presentation.

      Remark: For the essence of discovery.

 

 

 



      Name: Lei Lin

      University: Nanjing University

      Major: Life Sciences

 

      Description:I am interested in electrochemistry and biomedical engineering research.

      Impressed by the mechanism of CRISPER system, he decided to join the team. Outside

      the lab, he is a heavy soccer fan. During the program, he found systems biology became

      part of his motivation to continue pursuing his Ph.D degree.

 

 

 




      Name: Min Xi

      University: Nanjing University

      Major: Life Sciences

 

      Hobby:Reading  Biochemistry  Badminton

      Role: Major designer and coordinator of the scheme,experiment and presentation.

 

 

 




      Name: Tang Jie

      University: Nanjing University

      Major: Life Sciences

 

      Hobby:basketball   movies   Badminton

      Role: I mainly help with experiments and collecting information.

 

 

 


 

Retrieved from "http://2013.igem.org/Team:NJU_NJUT_China/team"