Team:UESTC Life

From 2013.igem.org

(Difference between revisions)
 
(450 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
      <head>
 
-
          <meta http-equiv="X-UA-Compatible" content="IE=8" />
 
           <style type="text/css">
           <style type="text/css">
Line 8: Line 6:
                   height:0px;
                   height:0px;
                 }
                 }
-
                 #p-logo,#footer-box
+
                 #p-logo,#footer-box,#search-controls,.firstHeading
                 {
                 {
                   display:none;
                   display:none;
Line 22: Line 20:
                   border:0;
                   border:0;
                 }
                 }
 +
　　　　　　　　
             </style>
             </style>
-
      </head>
 
<link href="https://2013.igem.org/Team:UESTC_Life/css/jquery.booklet.1.1.0.css?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet" media="screen" />
<link href="https://2013.igem.org/Team:UESTC_Life/css/jquery.booklet.1.1.0.css?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet" media="screen" />
Line 29: 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>
-
<!--[if lte IE 7]>
+
 
 +
<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]>
<style>
<style>
/* Inline block fix */
/* Inline block fix */
Line 54: Line 98:
}
}
</style>
</style>
 +
<![endif]-->
<![endif]-->
-
 
+
<script>
-
+
-
<script>
+
//library
//library
function distance(x0, y0, x1, y1) {
function distance(x0, y0, x1, y1) {
Line 122: 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">
<ul>
<ul>
-
<li><a href="#/page/1"><span>Address</span><img src="img/icon-address.png" alt="[address]" /></a></li><!--
+
<li><a href="#/page/1"><span>Home</span><img src="https://static.igem.org/mediawiki/igem.org/3/31/Uestclifehome.png" alt="[home]" /></a></li><!--
-
--><li><a href="#/page/3"><span>Band</span><img src="img/icon-band.png" alt="[band]" /></a></li><!--
+
--><li><a href="#/page/3"><span>Project</span><img src="https://static.igem.org/mediawiki/2013/9/9a/Uestclifeproject.png" alt="[project]" /></a></li><!--
-
--><li><a href="#/page/5"><span>Calendar</span><img src="img/icon-calendar.png" alt="[calendar]" /></a></li><!--
+
--><li><a href="#/page/5"><span>Result and Discution</span><img src="https://static.igem.org/mediawiki/2013/5/50/Uestcliferesult.png" alt="[Result and Discution]" /></a></li><!--
-
--><li class="active"><a href="#chat"><span>Chat</span><img src="img/icon-chat.png" alt="[chat]" /></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 class="active"><a href="#music"><span>Music</span><img src="img/icon-music.png" alt="[music]" /></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="#photo"><span>Photo</span><img src="img/icon-photo.png" alt="[photo]" /></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="#text"><span>Text</span><img src="img/icon-text.png" alt="[text]" /></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 class="seperator"></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="#folder?src=/apps/"><span>Applications</span><img src="img/icon-applications.png" alt="[apps]" /></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="#folder?src=/pictures/"><span>Pictures</span><img src="img/icon-pictures.png" alt="[pictures]" /></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>
-
--><li><a href="#folder?src=/documents/"><span>Documents</span><img src="img/icon-documents.png" alt="[documents]" /></a></li><!--
+
-
--><li><a href="#bin"><span>Bin</span><img src="img/icon-bin.png" alt="[bin]" /></a></li>
+
</ul>
</ul>
</div>
</div>
<div class="book_wrapper">
<div class="book_wrapper">
-
<a id="next_page_button"></a>
+
-
<a id="prev_page_button"></a>
+
<div id="loading" class="loading">Loading pages...</div>
<div id="loading" class="loading">Loading pages...</div>
<div id="mybook" style="display:none;">
<div id="mybook" style="display:none;">
<div class="b-load">
<div class="b-load">
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt=""/>
+
<h1>Home</h1>
-
<h1>Slider Gallery</h1>
+
<img src="https://static.igem.org/mediawiki/2013/2/21/Uestclifelife9.gif" alt="" />
-
<p>Show contents.</p>
+
<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".
-
<a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a>
+
</p>
-
<a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a>
+
-
</div>
+
-
                                        <div>
+
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
-
<h1>Animated Portfolio Gallery</h1>
+
-
<p>Today we will create an animated portfolio gallery with jQuery.
+
-
The gallery will contain a scroller for thumbnails and a
+
-
content area where we will display details about the portfolio
+
-
item. The image can be enlarged by clicking on it, making
+
-
it appear as an overlay.</p>
+
-
<a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
+
</div>
</div>
 +
<div  style="background:url(https://static.igem.org/mediawiki/2013/3/3f/Uestclifelifefamily.png);  no-repeat; width:100%;height:95%;">
 +
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<h1>Project</h1>
-
<h1>Annotation Overlay Effect</h1>
+
<img src="https://static.igem.org/mediawiki/igem.org/8/81/Uestclifedonghua.gif" alt="" />
-
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
+
<p>● Tow crude invaders, γ-HCH and TCP, occupied our beautiful homeland, people lived in hot water.</br>
-
items of a web designers portfolio. We got the idea from the wonderful
+
● When the key enzymes genes were transformed in our white fighter(E.coli), a pollution predator has been created.
-
portfolio of www.rareview.com where Flash is used to create the
+
  </br>● Those invaders died out in his stomach. The beautiful sky, clear water and health food returned to our life. 
-
effect. We will use jQuery.</p>
+
</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>Project</h1>
-
<h1>Bubbleriffic Image Gallery</h1>
+
 
-
<p>In this tutorial we will create a bubbly image gallery that
+
<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>
-
shows your images in a unique way. The idea is to show the
+
</br>
-
thumbnails of albums in a rounded fashion allowing the
+
</br>
-
user to scroll them automatically by moving the mouse.
+
<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>
-
Clicking on a thumbnail will zoom in a big circle and
+
</br>
-
the full image which will be automatically resized to
+
</br>
-
fit into the screen.</p>
+
<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>
-
<a href="http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/" target="_blank" class="article">Article</a>
+
</br>
-
<a href="http://tympanus.net/Tutorials/BubblerifficImageGallery/" target="_blank" class="demo">Demo</a>
+
</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>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<h1>Results and Discussion</h1>
-
<h1>Collapsing Site Navigation</h1>
+
</br>
-
<p>Today we will create a collapsing menu that contains vertical
+
<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>
-
navigation bars and a slide out content area. When hovering
+
</br>
-
over a menu item, an image slides down from the top and a
+
</br>
-
submenu slides up from the bottom. Clicking on one of the
+
</br>
-
submenu items will make the whole menu collapse like a card
+
<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>
-
deck and the respective content area will slide out.</p>
+
</br>
-
<a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/" target="_blank" class="article">Article</a>
+
</br>
-
<a href="http://tympanus.net/Tutorials/CollapsingSiteNavigation/" target="_blank" class="demo">Demo</a>
+
</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>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<h1>Results and Discussion</h1>
-
<h1>Custom Animation Banner</h1>
+
</br>
-
<p>In todayos tutorial we will be creating a custom animation banner with jQuery.
+
</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>
-
The idea is to have different elements in a banner that will
+
</br>
-
animate step-wise in a custom way.</p>
+
</br>
-
<p>We will be using the jQuery Easing Plugin and the jQuery 2D
+
</br>
-
Transform Plugin to create some nifty animations.</p>
+
</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>
-
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank" class="article">Article</a>
+
</br>
-
<a href="http://tympanus.net/Tutorials/CustomAnimationBanner/" target="_blank" class="demo">Demo</a>
+
</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>Full Page Image Gallery</h1>
+
<img src="https://static.igem.org/mediawiki/2013/7/7b/UestclifeUntitled.jpg" alt="" />
-
<p>In this tutorial we are going to create a stunning full page
+
<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
-
gallery with scrollable thumbnails and a scrollable full
+
</p>
-
screen preview. The idea is to have a thumbnails bar at
+
<a href="https://2013.igem.org/Team:UESTC_Life/Modeling#First_Model" class="demo">More</a>
-
the bottom of the page that scrolls automatically when
+
-
the user moves the mouse. When a thumbnail is clicked,
+
-
it moves to the center of the page and the full screen
+
-
image is loaded in the background.</p>
+
-
<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/FullPageImageGallery/" 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>Hover Slide Effect</h1>
+
<img src="https://static.igem.org/mediawiki/2013/e/e4/Uestclifemod.jpg" alt="" />
-
<p>Today we will create a neat effect with some images using
+
<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>
-
jQuery. The main idea is to have an image area with several
+
<a href="https://2013.igem.org/Team:UESTC_Life/Modeling#Second_Model" class="demo">More</a>
-
images that slide out when we hover over them, revealing
+
-
other images. The sliding effect will be random, i.e.
+
-
the images will slide to the top or bottom, left or
+
-
right, fading out or not. When we click on any area,
+
-
all areas will slide their images out.</p>
+
-
<a href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/HoverSlideEffect/" target="_blank" class="demo">Demo</a>
+
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<div class="wrap">
-
<h1>Merging Image Boxes</h1>
+
<a>
-
<p>Today we will show you a nice effect for images with jQuery.
+
<img src='https://static.igem.org/mediawiki/2013/b/be/Uestclife1_%289%29.jpg' alt='' />  
-
The idea is to have a set of rotated thumbnails that,
+
<i>&nbsp;</i>
-
once clicked, animate to form the selected image.
+
<p>  
-
You can navigate through the images with previous
+
<b>Yanpu Chen</b>
-
and next buttons and when the big image gets clicked
+
<br/>
-
it will scatter into the little box shaped thumbnails again.</p>
+
<span>Study field: Protein Engineering<br />
-
<a href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/" target="_blank" class="article">Article</a>
+
Hobby: violin、Harmonica、basketball<br />
-
<a href="http://tympanus.net/Development/MergingImageBoxes/" target="_blank" class="demo">Demo</a>
+
Team Position: Captain</span>
 +
</p>  
 +
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/4/47/Uestclife1_%2810%29.jpg' alt='' />  
 +
<i>&nbsp;</i>
 +
<p>
 +
<b>Maochen Xie</b>
 +
<br/>
 +
<span>Position : Student<br />
 +
Birth :27.Feb.1992<br />
 +
Hobby:Basketball,Computer,Music<br />
 +
Contact Information : 329115286@qq.com</span>  
 +
</p>
 +
</a>
 +
</div>
</div>
</div>
-
<div>
+
<div><div class="wrap">  
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<a>
-
<h1>Compact News Previewer</h1>
+
<img src='https://static.igem.org/mediawiki/2013/a/a1/Uestclife1_%2813%29.jpg' alt='' />  
-
<p>Today we will create a news previewer that letos you
+
<i>&nbsp;</i>
-
show your latest articles or news in a compact way.
+
<p>  
-
The news previewer will show some list of articles
+
<b>Xiaofei  Li</b> <br/>
-
on the left side and the preview of the article with a
+
<span>Study field: Lab of Plant Genome Engineering<br/>
-
longer description on the right. Once a news on the left
+
Hobby: Basketball,Swimming</span>
-
is clicked, the preview will slide in.</p>
+
</p>  
-
<a href="http://tympanus.net/codrops/2010/10/03/compact-news-previewer/" target="_blank" class="article">Article</a>
+
</a>
-
<a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" target="_blank" class="demo">Demo</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>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/3/36/Uestclife1_%281%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>Geng Sun</b>
-
expand. We will create this effect using jQuery.</p>
+
<br/>
-
<a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" target="_blank" class="article">Article</a>
+
<span>Study filed：Lab of Plant Genome Engineering<br/>
-
<a href="http://tympanus.net/Tutorials/OverlayEffectMenu/" target="_blank" class="demo">Demo</a>
+
Contact Information : 454008485@qq.com</span>
 +
</p>  
 +
</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>Polaroid Photobar Gallery</h1>
+
<a>
-
<p>In this tutorial we are going to create an image gallery
+
<img src='https://static.igem.org/mediawiki/2013/1/19/Uestclife1_%284%29.jpg' alt='' />  
-
with a Polaroid look. We will have albums that will expand
+
<i>&nbsp;</i>  
-
to sets of slightly rotated thumbnails that pop out on hover.
+
<p>  
-
The full image will slide in from the bottom once a thumbnail
+
<b>Zhaohui Zhong</b> <br/>
-
is clicked. In the full image view the user can navigate
+
<span>Birth :9.Apr.1992<br/>
-
through the pictures or simply choose another thumbnail
+
Study Field:Molecule Biology<br/>
-
to be displayed.</p>
+
Contact Information : zzh0409km@163.com
-
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="article">Article</a>
+
</span>
-
<a href="http://tympanus.net/Tutorials/PolaroidPhotobarGallery/" 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>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
<div class="wrap">
-
<h1>Pull Out Content Panel</h1>
+
<a>
-
<p>In this tutorial we will create a content panel that
+
<img src='https://static.igem.org/mediawiki/2013/e/e7/Uestclife1_%2811%29.jpg' alt='' />  
-
slides out at a predefined scroll position. It will
+
<i>&nbsp;</i>  
-
reveal a teaser with related content and it can be
+
<p>  
-
expanded to full page size to show more. A custom
+
<b>Chao Guo</b>
-
slider allows to scroll through many items in the
+
<span>Position : Advisor<br>
-
panel.</p>
+
Contact Information : ChaoGuo_dr@163.com<br>
-
<a href="http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/" target="_blank" class="article">Article</a>
+
Research Interest： Structures, functions and regulatory mechanism of protein</span>
-
<a href="http://tympanus.net/Tutorials/PullOutContentPanel/" target="_blank" class="demo">Demo</a>
+
</p>  
 +
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/e/ed/Uestclife1_%285%29.jpg' alt='' />  
 +
<i>&nbsp;</i>  
 +
<p>
 +
<b>Yu Zheng</b> <br/>
 +
<span>Position : Advisor<br/>
 +
Birth : 14.Oct.1989<br/>
 +
Contact Information :zy_198910@126.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>Thumbnails Navigation Gallery</h1>
+
<a>
-
<p>In this tutorial we are going to create an extraordinary
+
<img src='https://static.igem.org/mediawiki/2013/4/47/Uestclife1_%286%29.jpg' alt='' />  
-
gallery with scrollable thumbnails that slide out from a
+
<i>&nbsp;</i>  
-
navigation. We are going to use jQuery and some CSS3
+
<p>  
-
properties for the style. The main idea is to have a
+
<b style="color:#fff143;">Lixia  Tang</b><br/>
-
menu of albums where each item will reveal a horizontal
+
<span>Position:Instructor<br/>
-
bar with thumbnails when clicked.</p>
+
Research interesting:Protein Engineering</span>
-
<a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="article">Article</a>
+
</p>  
-
<a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/" 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>
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/a/a7/Uestclife1_%288%29.jpg' alt='' />
 +
<i>&nbsp;</i>
 +
<p>
 +
<b style="color:#fff143;">Xuelian Zheng</b> <br/>
 +
<span>Position:Instructor<br/>
 +
Research Interesting：Plant Genome Engineering<br/>
 +
Hobby: Yoga、cooking<br/>
 +
Contact Information : zhengxl@uestc.edu.cn</span>
 +
</p>
 +
</a>
 +
</div>
 +
 
 +
<div class="wrap">
 +
<a>
 +
<img src='https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg' alt='' />
 +
<i>&nbsp;</i>
 +
<p>
 +
<b style="color:#fff143;">Yong Zhang</b> <br/>
 +
<span>Position:Instructor<br/>
 +
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>
 +
<h1 style="font-size:20px;text-decoration:none;color:#AF3E3E;font-family: 'arial'">Thanks</h1>
 +
<img src='https://static.igem.org/mediawiki/2013/d/d9/Uestclifethanks1.jpg' alt='' />
 +
<img src='https://static.igem.org/mediawiki/2013/4/47/Uestclifethanks2.jpg' alt='' />
 +
</div>
 +
<div>
 +
<h1 style="font-size:20px;text-decoration:none;color:#AF3E3E;font-family: 'arial'">Thanks</h1>
 +
<a style=" font-size:16px;text-decoration:none;color:black;font-family: 'arial'"  onfocus=this.blur(); > <font  color="black">●UESTC</font></a></br>
 +
 
 +
<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 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>
 +
 
 +
<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>
 +
 
 +
 
 +
<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>
 +
 
 +
<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>
 +
</div>
 +
 
 +
<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%;">
 +
  </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 320: 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 341: 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
Line 350: Line 607:
easeOut:            'easeOutQuad',                  // easing method for second half of transition
easeOut:            'easeOutQuad',                  // easing method for second half of transition
-
closed:            true,                          // start with the book "closed", will add empty pages to beginning and end of book
+
closed:            false,                          // start with the book "closed", will add empty pages to beginning and end of book
closedFrontTitle:  null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
closedFrontTitle:  null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
Line 360: Line 617:
pageNumbers:        true,                            // display page numbers on each page
pageNumbers:        true,                            // display page numbers on each page
-
hovers:            false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
+
hovers:            true,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
overlays:          false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
overlays:          false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
tabs:              false,                          // adds tabs along the top of the pages
tabs:              false,                          // adds tabs along the top of the pages
tabWidth:          60,                              // set the width of the tabs
tabWidth:          60,                              // set the width of the tabs
tabHeight:          20,                              // set the height of the tabs
tabHeight:          20,                              // set the height of the tabs
-
arrows:            false,                          // adds arrows overlayed over the book edges
+
arrows:            true,                          // adds arrows overlayed over the book edges
cursor:            'pointer',                      // cursor css setting for side bar areas
cursor:            'pointer',                      // cursor css setting for side bar areas

Latest revision as of 15:52, 27 September 2013

Loading pages...

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