Team:UESTC Life

From 2013.igem.org

(Difference between revisions)
 
(420 intermediate revisions not shown)
Line 20: Line 20:
                   border:0;
                   border:0;
                 }
                 }
 +
　　　　　　　　
             </style>
             </style>
Line 26: Line 27:
<link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
<link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
-
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery-1.4.4.min.js?action=raw&amp;ctype=text/javascript"></script>
+
 
 +
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&amp;ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&amp;ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.booklet.1.1.0.min.js?action=raw&amp;ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.booklet.1.1.0.min.js?action=raw&amp;ctype=text/javascript"></script>
 +
 +
<style type="text/css">
 +
<!--
 +
html,body {height:100%; margin:0px; font-size:12px;}
 +
.mydiv {
 +
background: transparent;
 +
border: 0px solid #f00;
 +
text-align: center;
 +
line-height: 40px;
 +
font-size: 12px;
 +
font-weight: bold;
 +
z-index:50;
 +
width: 905px;
 +
height: 540px;
 +
top:0%;
 +
/*margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
 +
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
 +
margin-top:0px;*/
 +
position:fixed!important;/* FF IE7*/
 +
position:absolute;/*IE6*/
 +
_top:      expression(eval(document.compatMode &&
 +
            document.compatMode=='CSS1Compat') ?
 +
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
 +
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
 +
}
 +
.bg,.popIframe {
 +
background-color: #666;
 +
display:none;
 +
width: 100%;
 +
height: 100%;
 +
left:0;
 +
top:0;/*FF IE7*/
 +
filter:alpha(opacity=50);/*IE*/
 +
opacity:0.5;/*FF*/
 +
z-index:49;
 +
position:fixed!important;/* FF IE7*/
 +
position:absolute;/*IE6*/
 +
_top:      expression(eval(document.compatMode &&
 +
            document.compatMode=='CSS1Compat') ?
 +
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
 +
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
 +
}
 +
-->
 +
</style>
 +
<!--[if lt IE 7]>
<!--[if lt IE 7]>
<style>
<style>
Line 51: Line 98:
}
}
</style>
</style>
 +
<![endif]-->
<![endif]-->
-
 
+
<script>
-
+
-
<script>
+
//library
//library
function distance(x0, y0, x1, y1) {
function distance(x0, y0, x1, y1) {
Line 119: Line 165:
});
});
</script>
</script>
-
+
<script language="javascript" type="text/javascript">
 +
function showDiv(){
 +
document.getElementById('popDiv').style.display='block';
 +
document.getElementById('popIframe').style.display='block';
 +
document.getElementById('bg').style.display='block';
 +
if(document.getElementById('popIframePhoto') === null) {
 +
document.getElementById('popDiv').innerHTML='<br/><a href="javascript:closeDiv()"><font size=5px><strong>Close</strong></a><iframe id="popIframePhoto" width=100% height=100% src="https://2013.igem.org/Team:UESTC_Life/Team" frameborder=0></iframe>';
 +
}
 +
}
 +
function closeDiv(){
 +
document.getElementById('popDiv').style.display='none';
 +
document.getElementById('bg').style.display='none';
 +
}
 +
</script>
 +
<script type="text/javascript">
 +
function movetotop(){
 +
    $("html, body").animate({ scrollTop: 0 }, "slow");
 +
    return false;
 +
}
 +
        $(function() {
 +
            var offset = $("#logo").offset();
 +
            var topPadding = 15;
 +
            $(window).scroll(function() {
 +
                if ($(window).scrollTop() > offset.top) {
 +
                    $("#logo").stop().animate({
 +
                        marginTop: $(window).scrollTop() - offset.top + topPadding
 +
                    });
 +
                } else {
 +
                    $("#logo").stop().animate({
 +
                        marginTop: 0
 +
                    });
 +
                };
 +
            });
 +
        });
 +
    </script>
 +
<script type="text/javascript">
 +
var x=0;
 +
function cFun()
 +
{
 +
this.length=cFun.arguments.length;
 +
for(var i=0;i<this.length;i++)
 +
{
 +
this[i]=cFun.arguments[i];
 +
}
 +
}
 +
var color=new cFun("red","green","#ff00ff","#0000ff","#000000","#00ff00","#00ffff","#ff0ff0","#f0f0f0","#000fff");
 +
function Rcolor()
 +
{
 +
document.getElementById("colorChange").style.color=color[x];
 +
document.getElementById("colorChange").style.fontSize="20px";
 +
document.getElementById("colorChange").style.position="absolute";
 +
document.getElementById("colorChange").style.bottom="48px";
 +
document.getElementById("colorChange").style.right="19px";
 +
x=Math.floor(Math.random()*color.length);
 +
}
 +
setInterval("Rcolor()",500);
 +
</script>
 +
 
     <body>
     <body>
 +
<div style="position:absolute; right:-8%;top：-5%" id="logo" onclick="movetotop()" ><a href="https://igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/3/33/Uestclifebackgrounddi.png" width="100%"></a></div>
 +
<div  style="position:absolute;left:-10%;top:0%" >
 +
        <a href="https://igem.org/Team.cgi"><img src="https://static.igem.org/mediawiki/igem.org/8/8a/Uestclifebiot_logoarrow.png" style="filter:alpha(opacity=0,finishopacity=60,style=0)"></a>
 +
    <!-- end #logo --></div>
                 <!--bottom dock -->
                 <!--bottom dock -->
<div id="dock">
<div id="dock">
Line 129: Line 236:
--><li><a href="#/page/7"><span>Modeling</span><img src="https://static.igem.org/mediawiki/2013/2/21/Uestclifemodeling.png" alt="[Modeling]" /></a></li><!--
--><li><a href="#/page/7"><span>Modeling</span><img src="https://static.igem.org/mediawiki/2013/2/21/Uestclifemodeling.png" alt="[Modeling]" /></a></li><!--
--><li><a href="#/page/9"><span>Team</span><img src="https://static.igem.org/mediawiki/2013/c/c1/Uestclifeteam.png" alt="[team]" /></a></li><!--
--><li><a href="#/page/9"><span>Team</span><img src="https://static.igem.org/mediawiki/2013/c/c1/Uestclifeteam.png" alt="[team]" /></a></li><!--
-
--><li><a href="#/page/11"><span>Attribution and Contribution</span><img src="https://static.igem.org/mediawiki/2013/a/a2/Uestclifeac.png" alt="[Attribution and Contribution]" /></a></li><!--
+
--><li><a href="#/page/17"><span>Attribution and Contribution</span><img src="https://static.igem.org/mediawiki/2013/a/a2/Uestclifeac.png" alt="[Attribution and Contribution]" /></a></li><!--
-
--><li><a href="#/page/13"><span>Human Pratice</span><img src="https://static.igem.org/mediawiki/2013/1/1a/Stclifehuman.png" alt="[Human Pratice]" /></a></li><!--
+
--><li><a href="#/page/19"><span>Human Pratice</span><img src="https://static.igem.org/mediawiki/2013/1/1a/Stclifehuman.png" alt="[Human Pratice]" /></a></li><!--
-
--><li><a href="#/page/15"><span>Protocol</span><img src="https://static.igem.org/mediawiki/2013/8/8f/Uestclifeprotocol.png" alt="[protocol]" /></a></li><!--
+
--><li><a href="https://2013.igem.org/Team:UESTC_Life/Protocol"><span>Protocol</span><img src="https://static.igem.org/mediawiki/2013/8/8f/Uestclifeprotocol.png" alt="[protocol]" /></a></li><!--
-
--><li><a href="#/page/17"><span>Notebook</span><img src="https://static.igem.org/mediawiki/2013/6/63/Uestclifenotebook.png" alt="[notebook]" /></a></li><!--
+
--><li><a href="https://2013.igem.org/Team:UESTC_Life/Notebook"><span>Notebook</span><img src="https://static.igem.org/mediawiki/2013/6/63/Uestclifenotebook.png" alt="[notebook]" /></a></li><!--
-
--><li><a href="#/page/19"><span>Safety</span><img src="https://static.igem.org/mediawiki/2013/2/2d/Uestclifesafety.png" alt="[safety]" /></a></li>
+
--><li><a href="https://2013.igem.org/Team:UESTC_Life/Safety"><span>Safety</span><img src="https://static.igem.org/mediawiki/2013/2/2d/Uestclifesafety.png" alt="[safety]" /></a></li>
</ul>
</ul>
</div>
</div>
Line 143: Line 250:
<div class="b-load">
<div class="b-load">
<div>
<div>
-
<h1>Project Description</h1>
+
<h1>Home</h1>
-
<p>Haloalkanes are widely used commercially. The majorty of these compounds have been shown to be serious pollutants as they are toxic and quite persistent in the environment, such as a man-made industrial chemical 1,2,3-Trichloropropane (TCP) and an organic pesticideγ-Hexachlorocyclohexane (Lindane，γ-HCH). These halogenated compounds have been introduced into our environment as a consequence of industrial waste disposal and widespread open use in agriculture, which need to be removed to low levels from waste streams and during sanitation of polluted sites. For this reason, the biodegradation of halogenated compounds is of great importance. In the project, several key enzymes in the biodegradation pathways of the two compounds were co-expressed in E. coli.  As putting  </p>
+
<img src="https://static.igem.org/mediawiki/2013/2/21/Uestclifelife9.gif" alt="" />
 +
<p style="height:100px">Renowned as China's cradle for the national electronic industry, University of Electronic Science and Technology of China (formerly Chengdu Institute of Radio Engineering) is situated at Chengdu, the city of over a thousand-year-old cultural history in "the land of abundance".  
 +
</p>
</div>
</div>
-
                                        <div>
+
<div  style="background:url(https://static.igem.org/mediawiki/2013/3/3f/Uestclifelifefamily.png);  no-repeat; width:100%;height:95%;">
-
<h1>Project Description</h1>
+
</div>
-
<p>the different selected enzymes together, it will have a ability to degrade more halogenated compounds besides the both. To construct the efficient co-expression system and achieve biodegradation of γ-HCH and TCP, we adopt 2A peptide and polycistronic co-expression. Foot and mouth disease virus 2A peptide has been widely used for co-expression of multiple genes in eukaryote systems. However, the use of the 2A peptide in prokaryotes is limited, and so far only one paper described that F2A can work in E. coli as well. To explore whether the 2A peptides can work in our co-expression system, several vectors were constructed by using all three 2A peptides, respectively.</p>
+
<div>
-
<a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank" class="article">Article</a>
+
<h1>Project</h1>
-
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
+
<img src="https://static.igem.org/mediawiki/igem.org/8/81/Uestclifedonghua.gif" alt="" />
 +
<p>● Tow crude invaders, γ-HCH and TCP, occupied our beautiful homeland, people lived in hot water.</br>
 +
● When the key enzymes genes were transformed in our white fighter(E.coli), a pollution predator has been created.
 +
  </br>● Those invaders died out in his stomach. The beautiful sky, clear water and health food returned to our life.
 +
</p>
 +
</div>
 +
<div>
 +
<h1>Project</h1>
 +
 
 +
<a style=" font-size:24px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Project#Project_Overview"  onfocus=this.blur(); > <font  color="black">　　●Project Overview</font></a></br>
 +
</br>
 +
</br>
 +
<a style=" font-size:24px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Project#Project_Story" style="text-decoration:none"><font color="black">　　●Project Story</font></a></br>
 +
</br>
 +
</br>
 +
<a style="  font-size:24px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Project#Four_Key_Enzymes" style="text-decoration:none"><font color="black">　　●Four Key Enzymes</font></a></br>
 +
</br>
 +
</br>
 +
<a style="  font-size:24px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Project#Strategy" style="text-decoration:none"><font color="black">　　●Strategy</font></a></br>
 +
</br>
 +
</br>
 +
<a style="  font-size:24px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Project#Reference" style="text-decoration:none"><font color="black">　　●Reference</font></a></br>
 +
</br>
 +
</br>
 +
<a style=" font-size:18px;color:black font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Project" class="demo">More</a>
 +
</div>
 +
<div>
 +
<h1>Results and Discussion</h1>
 +
</br>
 +
<a style="  font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#TCP_Biodegradation_achieved" style="text-decoration:none"><font color="black" >　　● TCP Biodegradation Achieved</font></a>
 +
</br>
 +
</br>
 +
</br>
 +
<a style=" font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#.CE.B3-HCH_Biodegradation_and_F2A_Cleaving_Achieved" style="text-decoration:none"><font color="black">　　● γ-HCH Biodegradation and  F2A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cleaving Achieved</font>
 +
</br>
 +
</br>
 +
</br>
 +
</a><a style="  font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#P2A_Being_An_Excellent_Linker_in_Chimeric_Protein" style="text-decoration:none"><font color="black">　　● P2A Being an Excellent Linker in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chimeric Protein</font></a>
 +
</br></br></br>
 +
</a><a style="  font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#Polycistronic_Co-expression_System_Constructed" style="text-decoration:none"><font color="black">　　● Polycistronic Co-expression System  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Constructed</font></a>
 +
                                             
 +
 +
</div>
 +
<div>
 +
<h1>Results and Discussion</h1>
 +
</br>
 +
</a><a style="  font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#Vectors_and_Parts" style="text-decoration:none"><font color="black">　　● Vectors and Parts</font></a>
 +
</br>
 +
</br>
 +
</br>
 +
</a><a style="  font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#Future_Work" style="text-decoration:none"><font color="black">　　● Future Work</font></a>
 +
</br>
 +
</br>
 +
</br>
 +
<a style="  font-size:20px;text-decoration:none;color:black;font-family: 'arial'" href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion#Achievement" style="text-decoration:none"><font color="black">　　● Achievement</font></a>                                               
 +
</br></br></br></br></br></br></br></br>
 +
 +
<a href="https://2013.igem.org/Team:UESTC_Life/Results_and_discussion" class="demo">More</a>
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
                                                <h1>First Model</h1>
-
<h1>Annotation Overlay Effect</h1>
+
<img src="https://static.igem.org/mediawiki/2013/7/7b/UestclifeUntitled.jpg" alt="" />
-
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
+
<p style="overflow-y:auto;height:100px">A graph shows how the experimental concentration changed with time goes by, and then comparing the theoretical curve with the curve gotten from experiment
-
items of a web designers portfolio. We got the idea from the wonderful
+
</p>
-
portfolio of www.rareview.com where Flash is used to create the
+
<a href="https://2013.igem.org/Team:UESTC_Life/Modeling#First_Model" class="demo">More</a>
-
effect. We will use jQuery.</p>
+
-
<a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" target="_blank" class="demo">Demo</a>
+
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
                                                <h1>Second Model</h1>
-
<h1>Bubbleriffic Image Gallery</h1>
+
<img src="https://static.igem.org/mediawiki/2013/e/e4/Uestclifemod.jpg" alt="" />
-
<p>In this tutorial we will create a bubbly image gallery that
+
<p style="overflow-y:auto;height:100px">A mass of information about the influence of linkers’ structure and length were collected in the chimeric protein. And then we fitted a formula to predict the protein’s status as a linker by scoring it(with 10 a full marks). <br/></p>
-
shows your images in a unique way. The idea is to show the
+
<a href="https://2013.igem.org/Team:UESTC_Life/Modeling#Second_Model" class="demo">More</a>
-
thumbnails of albums in a rounded fashion allowing the
+
-
user to scroll them automatically by moving the mouse.
+
-
Clicking on a thumbnail will zoom in a big circle and
+
-
the full image which will be automatically resized to
+
-
fit into the screen.</p>
+
-
<a href="http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/BubblerifficImageGallery/" target="_blank" class="demo">Demo</a>
+
</div>
</div>
<div>
<div>
<div class="wrap">  
<div class="wrap">  
-
<a href="#x">  
+
<a>  
-
<img src='https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg' alt='' />  
+
<img src='https://static.igem.org/mediawiki/2013/b/be/Uestclife1_%289%29.jpg' alt='' />  
-
<i></i>  
+
<i>&nbsp;</i>
<p>  
<p>  
<b>Yanpu Chen</b>  
<b>Yanpu Chen</b>  
-
<span>School University of Electronic Science and Technology of China<br />
+
<br/>
-
Study field: Protein Engineering<br />
+
<span>Study field: Protein Engineering<br />
-
Team: UESTC_Life<br />
+
Hobby: violin、Harmonica、basketball<br />
Hobby: violin、Harmonica、basketball<br />
Team Position: Captain</span>  
Team Position: Captain</span>  
Line 192: Line 347:
<div class="wrap">  
<div class="wrap">  
-
<a href="#x">  
+
<a>  
-
<img src='https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg' alt='' />  
+
<img src='https://static.igem.org/mediawiki/2013/4/47/Uestclife1_%2810%29.jpg' alt='' />  
-
<i></i>  
+
<i>&nbsp;</i>
<p>  
<p>  
<b>Maochen Xie</b>  
<b>Maochen Xie</b>  
 +
<br/>
<span>Position : Student<br />
<span>Position : Student<br />
Birth :27.Feb.1992<br />
Birth :27.Feb.1992<br />
-
Hobby:Basketball,Computer,Music,Swimming<br />
+
Hobby:Basketball,Computer,Music<br />
-
Education experience:University of Electronic Science and Technology of China, Sep.2010-<br />
+
Contact Information : 329115286@qq.com</span>  
Contact Information : 329115286@qq.com</span>  
</p>  
</p>  
Line 206: Line 361:
</div>
</div>
</div>
</div>
-
<div>
+
<div><div class="wrap">  
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<a>
-
<h1>Custom Animation Banner</h1>
+
<img src='https://static.igem.org/mediawiki/2013/a/a1/Uestclife1_%2813%29.jpg' alt='' />  
-
<p>In todayos tutorial we will be creating a custom animation banner with jQuery.
+
<i>&nbsp;</i>
-
The idea is to have different elements in a banner that will
+
<p>  
-
animate step-wise in a custom way.</p>
+
<b>Xiaofei  Li</b> <br/>
-
<p>We will be using the jQuery Easing Plugin and the jQuery 2D
+
<span>Study field: Lab of Plant Genome Engineering<br/>
-
Transform Plugin to create some nifty animations.</p>
+
Hobby: Basketball,Swimming</span>  
-
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank" class="article">Article</a>
+
</p>  
-
<a href="http://tympanus.net/Tutorials/CustomAnimationBanner/" target="_blank" class="demo">Demo</a>
+
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/0/08/Uestclife1_%2812%29.jpg' alt='' />  
 +
<i>&nbsp;</i>
 +
<p>
 +
<b>Silong Jiang</b> <br/>
 +
<span>Study Field: Lab of Plant Genome Engineering<br/>
 +
Hobby: Basketball,Swimming and Tennis</span>
 +
</p>  
 +
</a>
 +
</div>
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<div class="wrap">
-
<h1>Full Page Image Gallery</h1>
+
<a>
-
<p>In this tutorial we are going to create a stunning full page
+
<img src='https://static.igem.org/mediawiki/2013/3/36/Uestclife1_%281%29.jpg' alt='' />  
-
gallery with scrollable thumbnails and a scrollable full
+
<i>&nbsp;</i>
-
screen preview. The idea is to have a thumbnails bar at
+
<p>  
-
the bottom of the page that scrolls automatically when
+
<b>Geng Sun</b>
-
the user moves the mouse. When a thumbnail is clicked,
+
<br/>
-
it moves to the center of the page and the full screen
+
<span>Study filed：Lab of Plant Genome Engineering<br/>
-
image is loaded in the background.</p>
+
Contact Information : 454008485@qq.com</span>
-
<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="article">Article</a>
+
</p>  
-
<a href="http://tympanus.net/Tutorials/FullPageImageGallery/" target="_blank" class="demo">Demo</a>
+
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/8/82/Uestclife1_%282%29.jpg' alt='' />  
 +
<i>&nbsp;</i>
 +
<p>
 +
<b>Tian Wang</b><br/>
 +
<span>Hobby：Basketball<br/>
 +
Contact Information : 1451622680@qq.com</span>
 +
</p>
 +
</a>  
 +
</div>
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<div class="wrap">
-
<h1>Hover Slide Effect</h1>
+
<a>
-
<p>Today we will create a neat effect with some images using
+
<img src='https://static.igem.org/mediawiki/2013/1/19/Uestclife1_%284%29.jpg' alt='' />  
-
jQuery. The main idea is to have an image area with several
+
<i>&nbsp;</i>  
-
images that slide out when we hover over them, revealing
+
<p>  
-
other images. The sliding effect will be random, i.e.
+
<b>Zhaohui Zhong</b> <br/>
-
the images will slide to the top or bottom, left or
+
<span>Birth :9.Apr.1992<br/>
-
right, fading out or not. When we click on any area,
+
Study Field:Molecule Biology<br/>
-
all areas will slide their images out.</p>
+
Contact Information : zzh0409km@163.com
-
<a href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank" class="article">Article</a>
+
</span>
-
<a href="http://tympanus.net/Tutorials/HoverSlideEffect/" target="_blank" class="demo">Demo</a>
+
</p>  
 +
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/2/2d/Uestclife1_%283%29.jpg' alt='' />  
 +
<i>&nbsp;</i>  
 +
<p>
 +
<b>DengWei Zhang</b> <br/>
 +
<span>Study field: Plant Genome Engineering<br/>
 +
Hobby: Poem,Music</span>
 +
</p>  
 +
</a>
 +
</div>
</div>
</div>
<div>
<div>
<div class="wrap">  
<div class="wrap">  
-
<a href="#x">  
+
<a>  
-
<img src='https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg' alt='' />  
+
<img src='https://static.igem.org/mediawiki/2013/e/e7/Uestclife1_%2811%29.jpg' alt='' />  
-
<i></i>  
+
<i>&nbsp;</i>  
<p>  
<p>  
-
<b>Yanpu Chen</b>  
+
<b>Chao Guo</b>  
-
<span>School University of Electronic Science and Technology of China<br />
+
<span>Position : Advisor<br>
-
Study field: Protein Engineering<br />
+
Contact Information : ChaoGuo_dr@163.com<br>
-
Team: UESTC_Life<br />
+
Research Interest： Structures, functions and regulatory mechanism of protein</span>  
-
Hobby: violin、Harmonica、basketball<br />
+
-
Team Position: Captain</span>  
+
</p>  
</p>  
</a>  
</a>  
Line 260: Line 453:
<div class="wrap">  
<div class="wrap">  
-
<a href="#x">  
+
<a>  
-
<img src='https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg' alt='' />  
+
<img src='https://static.igem.org/mediawiki/2013/e/ed/Uestclife1_%285%29.jpg' alt='' />  
-
<i></i>  
+
<i>&nbsp;</i>  
<p>  
<p>  
-
<b>Maochen Xie</b>  
+
<b>Yu Zheng</b> <br/>
-
<span>Position : Student<br />
+
<span>Position : Advisor<br/>
-
Birth :27.Feb.1992<br />
+
Birth : 14.Oct.1989<br/>
-
Hobby:Basketball,Computer,Music,Swimming<br />
+
Contact Information :zy_198910@126.com
-
Education experience:University of Electronic Science and Technology of China, Sep.2010-<br />
+
</span>  
-
Contact Information : 329115286@qq.com</span>  
+
</p>  
</p>  
</a>  
</a>  
Line 275: Line 467:
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<div class="wrap">
-
<h1>Compact News Previewer</h1>
+
<a>
-
<p>Today we will create a news previewer that letos you
+
<img src='https://static.igem.org/mediawiki/2013/4/47/Uestclife1_%286%29.jpg' alt='' />  
-
show your latest articles or news in a compact way.
+
<i>&nbsp;</i>  
-
The news previewer will show some list of articles
+
<p>  
-
on the left side and the preview of the article with a
+
<b style="color:#fff143;">Lixia  Tang</b><br/>
-
longer description on the right. Once a news on the left
+
<span>Position:Instructor<br/>
-
is clicked, the preview will slide in.</p>
+
Research interesting:Protein Engineering</span>
-
<a href="http://tympanus.net/codrops/2010/10/03/compact-news-previewer/" target="_blank" class="article">Article</a>
+
</p>  
-
<a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" target="_blank" class="demo">Demo</a>
+
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/4/42/Uestclife1_%2814%29.jpg' alt='' />  
 +
<i>&nbsp;</i>  
 +
<p>
 +
<b>Xu Tang</b><br/>
 +
<span>Study field:Plant Genome Engineering<br/>
 +
Hobby: Poem,Music,Dota</span>
 +
</p>  
 +
</a>
 +
</div>
</div>
</div>
-
<div>
+
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<div class="wrap">
-
<h1>Overlay Effect Menu</h1>
+
<a>
-
<p>In this tutorial we are going to create a simple menu
+
<img src='https://static.igem.org/mediawiki/2013/a/a7/Uestclife1_%288%29.jpg' alt='' />  
-
that will stand out once we hover over it by covering
+
<i>&nbsp;</i>  
-
everything except the menu with a dark overlay.
+
<p>  
-
The menu will stay white and a submenu area will
+
<b style="color:#fff143;">Xuelian Zheng</b> <br/>
-
expand. We will create this effect using jQuery.</p>
+
<span>Position:Instructor<br/>
-
<a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" target="_blank" class="article">Article</a>
+
Research Interesting：Plant Genome Engineering<br/>
-
<a href="http://tympanus.net/Tutorials/OverlayEffectMenu/" target="_blank" class="demo">Demo</a>
+
Hobby: Yoga、cooking<br/>
-
</div>
+
Contact Information : zhengxl@uestc.edu.cn</span>
-
<div>
+
</p>  
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
</a>  
-
<h1>Polaroid Photobar Gallery</h1>
+
</div>
-
<p>In this tutorial we are going to create an image gallery
+
 
-
with a Polaroid look. We will have albums that will expand
+
<div class="wrap">  
-
to sets of slightly rotated thumbnails that pop out on hover.
+
<a>
-
The full image will slide in from the bottom once a thumbnail
+
<img src='https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg' alt='' />
-
is clicked. In the full image view the user can navigate
+
<i>&nbsp;</i>
-
through the pictures or simply choose another thumbnail
+
<p>
-
to be displayed.</p>
+
<b style="color:#fff143;">Yong Zhang</b> <br/>
-
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="article">Article</a>
+
<span>Position:Instructor<br/>
-
<a href="http://tympanus.net/Tutorials/PolaroidPhotobarGallery/" target="_blank" class="demo">Demo</a>
+
Research Interesting：Plant Genome Engineering</span>
 +
</p>  
 +
</a>
 +
</div>
 +
</div>
 +
<div >
 +
<h1>Team</h1>
 +
</br>
 +
 
 +
 
 +
<img src="https://static.igem.org/mediawiki/igem.org/f/f8/20130924_161211.jpg" alt="" />
 +
</br>
 +
<center><p style="height:100px;font-size:20px;"></br><b>To achieve our goals, whatever difficulties will not hinder us.</b></p></center>
 +
</div>
</div>
-
<div>
+
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<h1 style="font-size:20px;text-decoration:none;color:#AF3E3E;font-family: 'arial'">Thanks</h1>
-
<h1>Pull Out Content Panel</h1>
+
<img src='https://static.igem.org/mediawiki/2013/d/d9/Uestclifethanks1.jpg' alt='' />
-
<p>In this tutorial we will create a content panel that
+
<img src='https://static.igem.org/mediawiki/2013/4/47/Uestclifethanks2.jpg' alt='' />
-
slides out at a predefined scroll position. It will
+
</div>
-
reveal a teaser with related content and it can be
+
<div>
-
expanded to full page size to show more. A custom
+
<h1 style="font-size:20px;text-decoration:none;color:#AF3E3E;font-family: 'arial'">Thanks</h1>
-
slider allows to scroll through many items in the
+
<a style=" font-size:16px;text-decoration:none;color:black;font-family: 'arial'"  onfocus=this.blur(); > <font  color="black">●UESTC</font></a></br>
-
panel.</p>
+
 
-
<a href="http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/" target="_blank" class="article">Article</a>
+
<a href="http://www.oice.uestc.edu.cn/en/"><img src="https://static.igem.org/mediawiki/2013/6/60/UESTC_Sponsor1.jpg"></img></a>
-
<a href="http://tympanus.net/Tutorials/PullOutContentPanel/" target="_blank" class="demo">Demo</a>
+
 
-
</div>
+
<a style=" font-size:16px;text-decoration:none;color:black;font-family: 'arial'"   onfocus=this.blur(); > <font  color="black">●Teaching Affairs Office of UESTC</font></a></br>
-
<div>
+
 
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<a href="http://www.oice.uestc.edu.cn/en/index.php?m=content&c=index&a=lists&catid=118"><img src="https://static.igem.org/mediawiki/2013/f/f9/UESTC_Sponsor2.jpg"></img></a>
-
<h1>Thumbnails Navigation Gallery</h1>
+
 
-
<p>In this tutorial we are going to create an extraordinary
+
 
-
gallery with scrollable thumbnails that slide out from a
+
<a style=" font-size:16px;text-decoration:none;color:black;font-family: 'arial'" onfocus=this.blur(); > <font  color="black">●School of Life Science and Technology,UESTC</font></a></br>
-
navigation. We are going to use jQuery and some CSS3
+
 
-
properties for the style. The main idea is to have a
+
<a href="http://www.oice.uestc.edu.cn/en/index.php?m=content&c=index&a=show&catid=117&id=17"><img src="https://static.igem.org/mediawiki/2013/4/42/UESTC_Sponsor3.jpg"></img></a>
-
menu of albums where each item will reveal a horizontal
+
</div>
-
bar with thumbnails when clicked.</p>
+
 
-
<a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="article">Article</a>
+
<div  class="b_left" style="background:url(https://static.igem.org/mediawiki/igem.org/4/4c/Uestclifehezao11_left.jpg);  no-repeat; width:100%;height:100%;">
-
<a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/" target="_blank" class="demo">Demo</a>
+
  </div>
-
</div>
+
 
-
</div>
+
<div  style="background:url(https://static.igem.org/mediawiki/igem.org/f/f8/Uestclifehezao11_right.jpg);  no-repeat; width:100%;height:100%;">
 +
<span style="font-size:19px;color:white;font-family: 'arial';background:rgba(0, 0, 0, 0.4)"></br>　We went to a senior high school named ChengduQiZhong and had fun with students and teachers, through free-communication and playing many games we introduced IGEM, synthetic biology and our project to them.</font></span>
 +
  <a href="javascript:showDiv()" style="text-decoration:none;"><span id="colorChange"></br>Click here for more</span></a>
 +
 
 +
</div>
</div>
</div>
</div>
</div>
-
+
 
-
+
 
 +
<center>
 +
  <div id="popDiv" class="mydiv" style="display:none;">
 +
  </div>
 +
</center>
 +
<div id="bg" class="bg">
 +
  <iframe id="popIframe" class="popIframe" frameborder=0></iframe>
 +
</div>
 +
 
 +
</div>
 +
 
         <!-- The JavaScript -->
         <!-- The JavaScript -->
Line 344: Line 576:
         <script type="text/javascript">
         <script type="text/javascript">
$(function() {
$(function() {
 +
                                var len = 800;
var $mybook = $('#mybook');
var $mybook = $('#mybook');
var $bttn_next = $('#next_page_button');
var $bttn_next = $('#next_page_button');
Line 365: Line 598:
$mybook.show().booklet({
$mybook.show().booklet({
name:              null,                            // name of the booklet to display in the document title bar
name:              null,                            // name of the booklet to display in the document title bar
-
width:              800,                            // container width
+
width:              len,                            // container width
height:            500,                            // container height
height:            500,                            // container height
speed:              600,                            // speed of the transition between pages
speed:              600,                            // speed of the transition between pages

Latest revision as of 15:52, 27 September 2013

Loading pages...

Retrieved from "http://2013.igem.org/Team:UESTC_Life"