From 2013.igem.org
<style type="text/css">
/* hiding the top section*/
body{position:absolute; top:0px; width:100%; height:1380px;}
- top-section{
height:0px;
border:none;
width:980px;
margin:0 auto;
padding:0 0 0 0;
background-color:transparent;
overflow:hide;
}
- p-logo{display:none;}
- search-controls{display:none;}
- top{display:none;}
.firstHeading{display:none;}
/* end of hiding the top section*/
/* global setting*/
- globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;}
- content{
background-color:transparent;
border:none;
width:1340px;
marign:0 auto;
padding:0 0 0 0;
top:0px;
}
- bodyContent{
background-color:transparent;
border:none;
}
siteSub{
display:none;
border:none;
}
contentSub{
display:none;
}
/* end of global setting*/
<head>
<meta name="keywords" content="IGEM" />
<meta name="description" content="NJU_NJUT" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>NJU_NJUT_CHINA</title>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #000'});
Cufon.replace('h2',{ textShadow: '1px 1px #000'});
Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
</script>
<style>
body{
font-family:Arial;
}
.aa {height:105px; overflow:hidden;}
.pxs_container{
width:960px;
height:420px;
position:absolute;
top:270px;
left:195px;
border-top:7px solid #333;
border-bottom:7px solid #333;
overflow:hidden;
-moz-box-shadow:0px 0px 7px #000;
-webkit-box-shadow:0px 0px 7px #000;
box-shadow:0px 0px 7px #000;
z-index:1;
}
.pxs_bg{
background:transparent url(http://igem.3vfree.us/images/bg.png) repeat top left;
}
.pxs_bg div{
position:absolute;
top:0px;
left:0px;
width:1155px; /*1264px window width times number of images*/
height:420px;
background-repeat:repeat;
background-position:top left;
background-color:transparent;
}
.pxs_bg .pxs_bg1{
background-image:url(http://igem.3vfree.us/images/imgbg.jpg);
/*left negative 1/8 of ww*/
}
.pxs_slider_wrapper{
display:none;
}
.pxs_container ul{
margin:0px;
padding:0px;
list-style:none;
}
ul.pxs_slider{
position:relative;
left:0px;
top:0px;
height:420px;
}
ul.pxs_slider li{
height:420px;
float:left;
left:-200px;
position:relative;
}
ul.pxs_slider li img{
display:block;
margin:35px auto 0px auto;
-moz-box-shadow:0px 0px 7px #222;
-webkit-box-shadow:0px 0px 7px #222;
box-shadow:0px 0px 7px #222;
border: 8px solid transparent;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
ul.pxs_thumbnails{
height:35px;
position:absolute;
top:320px;
left:50%;
}
ul.pxs_thumbnails li{
position:absolute;
display:block;
}
ul.pxs_thumbnails li img{
border: 5px solid #FFFFFF;
-moz-box-shadow:1px 1px 7px #555;
-webkit-box-shadow:1px 1px 7px #555;
box-shadow:1px 1px 7px #555;
cursor:pointer;
display:block;
opacity:0.7;
}
ul.pxs_thumbnails li.selected img{
opacity:1.0;
}
.pxs_navigation span{
position:absolute;
width:30px;
height:60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
top:145px;
opacity:0.5;
- <a href="">Home</a>
- <a href="" style="width:115px;">TEAM</a>
- <a href="" style="width:135px;">PROJECT</a>
- <a href="" style="width:150px;">MODELING</a>
- <a href=""style="width:125px;">SAFETY</a>
- <a href=""style="width:205px;">HUMANPRACTICE</a>
Loading images...
- <img src="http://igem.3vfree.us/images/1.jpg" alt="First Image" />
- <img src="http://igem.3vfree.us/images/2.jpg" alt="Second Image" />
- <img src="http://igem.3vfree.us/images/3.jpg" alt="Third Image" />
- <img src="http://igem.3vfree.us/images/4.jpg" alt="Forth Image" />
- <img src="http://igem.3vfree.us/images/5.jpg" alt="Fifth Image" />
- <img src="http://igem.3vfree.us/images/6.jpg" alt="Sixth Image" />
- <img src="http://igem.3vfree.us/images/thumbs/1.jpg" alt="First Image" />
- <img src="http://igem.3vfree.us/images/thumbs/2.jpg" alt="Second Image" />
- <img src="http://igem.3vfree.us/images/thumbs/3.jpg" alt="Third Image" />
- <img src="http://igem.3vfree.us/images/thumbs/4.jpg" alt="Forth Image" />
- <img src="http://igem.3vfree.us/images/thumbs/5.jpg" alt="Fifth Image" />
- <img src="http://igem.3vfree.us/images/thumbs/6.jpg" alt="Sixth Image" />
<a href="#" >Project </a>
Basic Information
Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the clusters of regularly interspaced short palindromic repeats (CRISPRs). <img src="http://igem.3vfree.us/images/ind1.jpg" width="212" height="164" width="237" align='right'/> And CRISPR-based defense system can also protects them against the invading DNA and/or RNA elements. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system....
<a href="#">Introduction to our experiment</a>
information<a href="#" class="permalink"></a>
Based on the fundamental synthetic biology methods, include the molecular cloning, long PCR, recombinant construction, restriction digestion and yeast transformation, our project aims to enable Saccharomyces cerevisiae to resist viruses utilizing the CRISPR system found in most bacteria and archaea lately.
To ensure the accurate output, we divide the original linear gene into several elements , and also purify and propagate the complete target sequence to make the both two models work in the host cell. To present the actual effect of CRISPR in yeast, we design our own mimic virus construction based on the homologous sequences shown in the specific viral genome database, which can be recognized, and control the baseline both for anti-virus ability and CRISPR's effect in its original form.
More specifically, we first obtain our CRISPR system by genome-extraction from E.coli str W3110, and clone the respective target genes as modules. The construction, as well as the mimic virus construction, IS made by restriction-ligase way. We transform the mimic virus plasmid first by lithium acetate method and verify the availability by several antibiotics. We then import CRISPR system in the same way, utilizing the Ochre mutation and GFP switch-off to evaluate the anti-virus feasibility.
Read More
</hr >
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.parallaxSlider = function(options) {
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
return this.each(function() {
var $pxs_container = $(this),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
//the main slider
var $pxs_slider = $('.pxs_slider',$pxs_container),
//the elements in the slider
$elems = $pxs_slider.children(),
//total number of elements
total_elems = $elems.length,
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container),
$pxs_prev = $('.pxs_prev',$pxs_container),
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
//current image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
//the thumbs
$thumbs = $pxs_thumbnails.children(),
//the interval for the autoplay mode
slideshow,
//the loading image
$pxs_loading = $('.pxs_loading',$pxs_container),
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
//first preload all the images
var loaded = 0,
$images = $pxs_slider_wrapper.find('img');
$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();
//one images width (assuming all images have the same sizes)
var one_image_w = $pxs_slider.find('img:first').width();
/*
need to set width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev);
/*
set the width of the thumbs
and spread them evenly
*/
$pxs_thumbnails.css({
'width' : one_image_w + 'px',
'margin-left' : -one_image_w/2 + 'px'
});
var spaces = one_image_w/(total_elems+1);
$thumbs.each(function(i){
var $this = $(this);
var left = spaces*(i+1) - $this.width()/2;
$this.css('left',left+'px');
if(o.thumbRotation){
var angle = Math.floor(Math.random()*41)-20;
$this.css({
'-moz-transform' : 'rotate('+ angle +'deg)',
'-webkit-transform' : 'rotate('+ angle +'deg)',
'transform' : 'rotate('+ angle +'deg)'
});
}
//hovering the thumbs animates them up and down
$this.bind('mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().animate({top:'0px'},100);
});
});
//make the first thumb be selected
highlight($thumbs.eq(0));
//slide when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current >= total_elems)
if(o.circular)
current = 0;
else{
--current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0)
if(o.circular)
current = total_elems - 1;
else{
++current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
/*
clicking a thumb will slide to the respective image
*/
$thumbs.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
//if autoplay interrupt when user clicks
if(o.auto)
clearInterval(slideshow);
current = $thumb.index();
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
/*
activate the autoplay mode if
that option was specified
*/
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}
/*
when resizing the window,
we need to recalculate the widths of the
slider elements, based on the new windows width.
we need to slide again to the current one,
since the left of the slider is no longer correct
*/
$(window).resize(function(){
w_w = $(window).width();
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
1,
o.easing,
o.easingBg);
});
}
}).error(function(){
alert('here')
}).attr('src',$img.attr('src'));
});
});
};
//the current windows width
var w_w = $(window).width();
var slide = function(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
speed,
easing,
easingBg){
var slide_to = parseInt(-w_w * current);
$pxs_slider.stop().animate({
left : slide_to + 'px'
},speed, easing);
$pxs_bg3.stop().animate({
left : slide_to/2 + 'px'
},speed, easingBg);
$pxs_bg2.stop().animate({
left : slide_to/4 + 'px'
},speed, easingBg);
$pxs_bg1.stop().animate({
left : slide_to/8 + 'px'
},speed, easingBg);
}
var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}
var setWidths = function($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev){
/*
the width of the slider is the windows width
times the total number of elements in the slider
*/
var pxs_slider_w = w_w * total_elems;
$pxs_slider.width(pxs_slider_w + 'px');
//each element will have a width = windows width
$elems.width(w_w + 'px');
/*
we also set the width of each bg image div.
The value is the same calculated for the pxs_slider
*/
$pxs_bg1.width(pxs_slider_w + 'px');
$pxs_bg2.width(pxs_slider_w + 'px');
$pxs_bg3.width(pxs_slider_w + 'px');
/*
both the right and left of the
navigation next and previous buttons will be:
windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
*/
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right', position_nav + 'px');
$pxs_prev.css('left', position_nav + 'px');
}
$.fn.parallaxSlider.defaults = {
auto : 0, //how many seconds to periodically slide the content.
//If set to 0 then autoplay is turned off.
speed : 1000,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
easingBg : 'jswing',//easing effect for the background animation
circular : true,//circular slider
thumbRotation : true//the thumbs will be randomly rotated
};
//easeInOutExpo,easeInBack
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
var $pxs_container = $('#pxs_container');
$pxs_container.parallaxSlider();
});
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
function $aa(obj)
{
if(obj.className == "aa")
{
obj.className = "bb";
}
else
obj.className = "aa";
}
function unfold(element){
var temp=document.getElementById(element);
$aa(temp);
}
</script>
<script>
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
</script>
</body>
</html>
"
