Team:UESTC Life

From 2013.igem.org

(Difference between revisions)
 
(484 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<link href="https://2013.igem.org/Team:UESTC_Life/css/jquery.booklet.1.1.0.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" />
 
-
<link rel="stylesheet" href="https://2013.igem.org/Team:UESTC_Life/css/style.css?action=raw&ctype=text/css" type="text/css" media="screen"/>
 
-
<link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&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&ctype=text/javascript"></script>
+
          <style type="text/css">
-
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
+
                #top-section
-
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.booklet.1.1.0.min.js?action=raw&ctype=text/javascript"></script>
+
                {
 +
                  height:0px;
 +
                }
 +
                #p-logo,#footer-box,#search-controls,.firstHeading
 +
                {
 +
                  display:none;
 +
                }
 +
                #content
 +
                {
 +
                  background-color:transparent;
 +
                  border:0;
 +
                }
 +
                #catlinks
 +
                {
 +
                  background-color:transparent;
 +
                  border:0;
 +
                }
 +
　　　　　　　　
 +
            </style>
-
+
<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 rel="stylesheet" href="https://2013.igem.org/Team:UESTC_Life/css/style.css?action=raw&amp;ctype=text/css" type="text/css" media="screen"/>
-
<!--[if lte IE 7]>
+
<link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
-
<style>
+
-
/* Inline block fix */
+
-
#dock ul {
+
-
display: inline;
+
-
zoom: 1;
+
-
}
+
-
#dock li, #dock li a {
 
-
display: inline;
 
-
zoom: 1;
 
-
}
 
-
/* Image quality fix */
+
-
img {
+
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&amp;ctype=text/javascript"></script>
-
-ms-interpolation-mode: bicubic;
+
<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>
-
}
+
-
#dock li a span {
+
<style type="text/css">
-
filter: alpha(opacity=40);
+
<!--
-
}
+
html,body {height:100%; margin:0px; font-size:12px;}
-
</style>
+
.mydiv {
-
<![endif]-->
+
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>
 +
/* Inline block fix */
 +
#dock ul {
 +
display: inline;
 +
zoom: 1;
 +
}
 +
 
 +
#dock li, #dock li a {
 +
display: inline;
 +
zoom: 1;
 +
}
 +
 
 +
/* Image quality fix */
 +
img {
 +
-ms-interpolation-mode: bicubic;
 +
}
 +
 
 +
#dock li a span {
 +
filter: alpha(opacity=40);
 +
}
 +
</style>
 +
 
 +
<![endif]-->
<script>
<script>
-
//library
+
//library
-
function distance(x0, y0, x1, y1) {
+
function distance(x0, y0, x1, y1) {
-
var xDiff = x1-x0;
+
var xDiff = x1-x0;
-
var yDiff = y1-y0;
+
var yDiff = y1-y0;
 +
 +
return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
 +
}
-
return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
+
$(document).ready(function() {
-
}
+
var proximity = 180;
-
+
var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size
-
$(document).ready(function() {
+
var iconDiff = (iconLarge - iconSmall);
-
var proximity = 180;
+
var mouseX, mouseY;
-
var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size
+
var dock = $("#dock");
-
var iconDiff = (iconLarge - iconSmall);
+
var animating = false, redrawReady = false;
-
var mouseX, mouseY;
+
-
var dock = $("#dock");
+
-
var animating = false, redrawReady = false;
+
-
+
-
$(document.body).removeClass("no_js");
+
-
+
-
//below are methods for maintaining a constant 60fps redraw for the dock without flushing
+
-
$(document).bind("mousemove", function(e) {
+
-
if (dock.is(":visible")) {
+
-
mouseX = e.pageX;
+
-
mouseY = e.pageY;
+
-
redrawReady = true;
+
$(document.body).removeClass("no_js");
-
registerConstantCheck();
+
 +
//below are methods for maintaining a constant 60fps redraw for the dock without flushing
 +
$(document).bind("mousemove", function(e) {
 +
if (dock.is(":visible")) {
 +
mouseX = e.pageX;
 +
mouseY = e.pageY;
 +
 +
redrawReady = true;
 +
registerConstantCheck();
 +
}
 +
});
 +
 +
function registerConstantCheck() {
 +
if (!animating) {
 +
animating = true;
 +
 +
window.setTimeout(callCheck, 15);
 +
}
}
}
-
});
+
-
+
function callCheck() {
-
function registerConstantCheck() {
+
sizeDockIcons();
-
if (!animating) {
+
-
animating = true;
+
-
window.setTimeout(callCheck, 15);
+
animating = false;
 +
 +
if (redrawReady) {
 +
redrawReady = false;
 +
registerConstantCheck();
 +
}
}
}
-
}
 
-
 
-
function callCheck() {
 
-
sizeDockIcons();
 
-
animating = false;
+
//do the maths and resize each icon
-
+
function sizeDockIcons() {
-
if (redrawReady) {
+
dock.find("li").each(function() {
-
redrawReady = false;
+
//find the distance from the center of each icon
-
registerConstantCheck();
+
var centerX = $(this).offset().left + ($(this).outerWidth()/2.0);
 +
var centerY = $(this).offset().top + ($(this).outerHeight()/2.0);
 +
 +
var dist = distance(centerX, centerY, mouseX, mouseY);
 +
 +
//determine the new sizes of the icons from the mouse distance from their centres
 +
var newSize =  (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall;
 +
$(this).find("a").css({width: newSize});
 +
});
}
}
-
}
+
});
-
+
</script>
-
//do the maths and resize each icon
+
<script language="javascript" type="text/javascript">
-
function sizeDockIcons() {
+
function showDiv(){
-
dock.find("li").each(function() {
+
document.getElementById('popDiv').style.display='block';
-
//find the distance from the center of each icon
+
document.getElementById('popIframe').style.display='block';
-
var centerX = $(this).offset().left + ($(this).outerWidth()/2.0);
+
document.getElementById('bg').style.display='block';
-
var centerY = $(this).offset().top + ($(this).outerHeight()/2.0);
+
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>';
-
var dist = distance(centerX, centerY, mouseX, mouseY);
+
}
-
+
}
-
//determine the new sizes of the icons from the mouse distance from their centres
+
function closeDiv(){
-
var newSize = (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall;
+
document.getElementById('popDiv').style.display='none';
-
$(this).find("a").css({width: newSize});
+
document.getElementById('bg').style.display='none';
-
});
+
}
-
}
+
</script>
-
});
+
<script type="text/javascript">
-
</script>
+
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>
-
<script>
+
<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>
-
Get_IE_Version();
+
<div  style="position:absolute;left:-10%;top:0%" >
-
</script>
+
        <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 -->
 +
<div id="dock">
 +
<ul>
 +
<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>Project</span><img src="https://static.igem.org/mediawiki/2013/9/9a/Uestclifeproject.png" alt="[project]" /></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><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/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/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="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="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="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>
 +
</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="images/1.jpg" alt=""/>
+
<h1>Home</h1>
-
<h1>Slider Gallery</h1>
+
<img src="https://static.igem.org/mediawiki/2013/2/21/Uestclifelife9.gif" alt="" />
-
<p>This tutorial is about creating a creative gallery with a
+
<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".
-
slider for the thumbnails. The idea is to have an expanding
+
</p>
-
thumbnails area which opens once an album is chosen.
+
-
The thumbnails will scroll to the end and move back to
+
-
the first image. The user can scroll through the thumbnails
+
-
by using the slider controls. When a thumbnail is clicked,
+
-
it moves to the center and the full image preview opens.</p>
+
-
<a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/SliderGallery/" 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="images/2.jpg" alt="" />
+
<h1>Project</h1>
-
<h1>Animated Portfolio Gallery</h1>
+
<img src="https://static.igem.org/mediawiki/igem.org/8/81/Uestclifedonghua.gif" alt="" />
-
<p>Today we will create an animated portfolio gallery with jQuery.
+
<p>● Tow crude invaders, γ-HCH and TCP, occupied our beautiful homeland, people lived in hot water.</br>
-
The gallery will contain a scroller for thumbnails and a
+
● When the key enzymes genes were transformed in our white fighter(E.coli), a pollution predator has been created. 
-
content area where we will display details about the portfolio
+
  </br>● Those invaders died out in his stomach. The beautiful sky, clear water and health food returned to our life. 
-
item. The image can be enlarged by clicking on it, making
+
</p>
-
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>
<div>
-
<img src="images/3.jpg" alt="" />
+
<h1>Project</h1>
-
<h1>Annotation Overlay Effect</h1>
+
 
-
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
+
<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>
-
items of a web designers portfolio. We got the idea from the wonderful
+
</br>
-
portfolio of www.rareview.com where Flash is used to create the
+
</br>
-
effect. We will use jQuery.</p>
+
<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>
-
<a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
+
</br>
-
<a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" 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#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>
<div>
<div>
-
<img src="images/4.jpg" alt="" />
+
<h1>Results and Discussion</h1>
-
<h1>Bubbleriffic Image Gallery</h1>
+
</br>
-
<p>In this tutorial we will create a bubbly image gallery that
+
<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>
-
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.
+
</br>
-
Clicking on a thumbnail will zoom in a big circle and
+
<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>
-
the full image which will be automatically resized to
+
</br>
-
fit into the screen.</p>
+
</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>
+
</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="images/5.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><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>
-
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><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>
-
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 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="images/6.jpg" alt="" />
+
                                                <h1>First Model</h1>
-
<h1>Custom Animation Banner</h1>
+
<img src="https://static.igem.org/mediawiki/2013/7/7b/UestclifeUntitled.jpg" alt="" />
-
<p>In today’s tutorial we will be creating a custom animation banner with jQuery.
+
<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
-
The idea is to have different elements in a banner that will
+
</p>
-
animate step-wise in a custom way.</p>
+
<a href="https://2013.igem.org/Team:UESTC_Life/Modeling#First_Model" class="demo">More</a>
-
<p>We will be using the jQuery Easing Plugin and the jQuery 2D
+
-
Transform Plugin to create some nifty animations.</p>
+
-
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/CustomAnimationBanner/" target="_blank" class="demo">Demo</a>
+
</div>
</div>
<div>
<div>
-
<img src="images/7.jpg" alt="" />
+
                                                <h1>Second Model</h1>
-
<h1>Full Page Image Gallery</h1>
+
<img src="https://static.igem.org/mediawiki/2013/e/e4/Uestclifemod.jpg" alt="" />
-
<p>In this tutorial we are going to create a stunning full page
+
<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>
-
gallery with scrollable thumbnails and a scrollable full
+
<a href="https://2013.igem.org/Team:UESTC_Life/Modeling#Second_Model" class="demo">More</a>
-
screen preview. The idea is to have a thumbnails bar at
+
-
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="images/8.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/b/be/Uestclife1_%289%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>Yanpu Chen</b>
-
the images will slide to the top or bottom, left or
+
<br/>
-
right, fading out or not. When we click on any area,
+
<span>Study field: Protein Engineering<br />
-
all areas will slide their images out.</p>
+
Hobby: violin、Harmonica、basketball<br />
-
<a href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank" class="article">Article</a>
+
Team Position: Captain</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/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="images/9.jpg" alt="" />
+
<a>
-
<h1>Merging Image Boxes</h1>
+
<img src='https://static.igem.org/mediawiki/2013/a/a1/Uestclife1_%2813%29.jpg' alt='' />  
-
<p>Today we will show you a nice effect for images with jQuery.
+
<i>&nbsp;</i>
-
The idea is to have a set of rotated thumbnails that,
+
<p>  
-
once clicked, animate to form the selected image.
+
<b>Xiaofei  Li</b> <br/>
-
You can navigate through the images with previous
+
<span>Study field: Lab of Plant Genome Engineering<br/>
-
and next buttons and when the big image gets clicked
+
Hobby: Basketball,Swimming</span>
-
it will scatter into the little box shaped thumbnails again.</p>
+
</p>  
-
<a href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/" target="_blank" class="article">Article</a>
+
</a>
-
<a href="http://tympanus.net/Development/MergingImageBoxes/" 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="images/10.jpg" alt="" />
+
<div class="wrap">
-
<h1>Compact News Previewer</h1>
+
<a>
-
<p>Today we will create a news previewer that let’s you
+
<img src='https://static.igem.org/mediawiki/2013/3/36/Uestclife1_%281%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>Geng Sun</b>
-
longer description on the right. Once a news on the left
+
<br/>
-
is clicked, the preview will slide in.</p>
+
<span>Study filed：Lab of Plant Genome Engineering<br/>
-
<a href="http://tympanus.net/codrops/2010/10/03/compact-news-previewer/" target="_blank" class="article">Article</a>
+
Contact Information : 454008485@qq.com</span>
-
<a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" target="_blank" class="demo">Demo</a>
+
</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="images/11.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/1/19/Uestclife1_%284%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>Zhaohui Zhong</b> <br/>
-
expand. We will create this effect using jQuery.</p>
+
<span>Birth :9.Apr.1992<br/>
-
<a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" target="_blank" class="article">Article</a>
+
Study Field:Molecule Biology<br/>
-
<a href="http://tympanus.net/Tutorials/OverlayEffectMenu/" target="_blank" class="demo">Demo</a>
+
Contact Information : zzh0409km@163.com
 +
</span>
 +
</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="images/12.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/e/e7/Uestclife1_%2811%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>Chao Guo</b>
-
is clicked. In the full image view the user can navigate
+
<span>Position : Advisor<br>
-
through the pictures or simply choose another thumbnail
+
Contact Information : ChaoGuo_dr@163.com<br>
-
to be displayed.</p>
+
Research Interest： Structures, functions and regulatory mechanism of protein</span>
-
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="article">Article</a>
+
</p>  
-
<a href="http://tympanus.net/Tutorials/PolaroidPhotobarGallery/" target="_blank" class="demo">Demo</a>
+
</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="images/13.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/4/47/Uestclife1_%286%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 style="color:#fff143;">Lixia  Tang</b><br/>
-
slider allows to scroll through many items in the
+
<span>Position:Instructor<br/>
-
panel.</p>
+
Research interesting:Protein Engineering</span>
-
<a href="http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/" target="_blank" class="article">Article</a>
+
</p>  
-
<a href="http://tympanus.net/Tutorials/PullOutContentPanel/" 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="images/14.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/a/a7/Uestclife1_%288%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;">Xuelian Zheng</b> <br/>
-
menu of albums where each item will reveal a horizontal
+
<span>Position:Instructor<br/>
-
bar with thumbnails when clicked.</p>
+
Research Interesting：Plant Genome Engineering<br/>
-
<a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="article">Article</a>
+
Hobby: Yoga、cooking<br/>
-
<a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/" target="_blank" class="demo">Demo</a>
+
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>
-
</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 288: 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 309: 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:              1280,                            // container width
+
width:              len,                            // container width
-
height:            680,                            // container height
+
height:            500,                            // container height
speed:              600,                            // speed of the transition between pages
speed:              600,                            // speed of the transition between pages
direction:          'LTR',                          // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
direction:          'LTR',                          // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
Line 360: Line 649:
         </script>
         </script>
-
<!--bottom dock -->
 
-
<div id="dock">
 
-
<ul>
 
-
<li><a href="#/page/1"><span>Address</span><img src="img/icon-address.png" alt="[address]" /></a></li><!--
 
-
--><li><a href="#/page/3"><span>Band</span><img src="img/icon-band.png" alt="[band]" /></a></li><!--
 
-
--><li><a href="#/page/5"><span>Calendar</span><img src="img/icon-calendar.png" alt="[calendar]" /></a></li><!--
 
-
--><li class="active"><a href="#chat"><span>Chat</span><img src="img/icon-chat.png" alt="[chat]" /></a></li><!--
 
-
--><li class="active"><a href="#music"><span>Music</span><img src="img/icon-music.png" alt="[music]" /></a></li><!--
 
-
--><li><a href="#photo"><span>Photo</span><img src="img/icon-photo.png" alt="[photo]" /></a></li><!--
 
-
--><li><a href="#text"><span>Text</span><img src="img/icon-text.png" alt="[text]" /></a></li><!--
 
-
--><!-- <li class="seperator"></li> --><!--
 
-
--><li><a href="#folder?src=/apps/"><span>Applications</span><img src="img/icon-applications.png" alt="[apps]" /></a></li><!--
 
-
--><li><a href="#folder?src=/pictures/"><span>Pictures</span><img src="img/icon-pictures.png" alt="[pictures]" /></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>
 
-
</div>
 
     </body>
     </body>
</html>
</html>

Latest revision as of 15:52, 27 September 2013

Loading pages...

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