Difference between revisions of "Team:NEU China B"

 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{NEU_China_B}}
 
{{NEU_China_B}}
 
<html>
 
<html>
−
+
<style>
−
<canvas id="base_page" width="800" height="400" style="border:1px solid #c3c3c3;" class="center-block">
+
.slider-box{position:relative}
 +
.slider_cube,.slider_inner_a,.slider_inner_b
 +
{position:absolute;width:100%;height:100%;overflow:hidden}
 +
.slider_nav_box{position:absolute;right:0;bottom:25%}
 +
.slider_nav_title{background:url(../../../i1.tietuku.com/87ec913b390798fa.png) repeat center right;min-width:150px;height:100px}
 +
.slider_nav{background:url(http://i1.tietuku.com/87ec913b390798fa.png) no-repeat;height:18px;min-width:100px}
 +
.slider_bar{position:absolute;width:100%;text-align:center;bottom:10px;height:20px}
 +
.slider_bar span{
 +
    display:inline-block;margin:0 10px;width:14px;height:14px;
 +
    background:#B7B7B7;cursor:pointer;
 +
    border-radius:20px;
 +
    box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
    -webkit-transition:.3s;
 +
    -moz-transition:.3s;
 +
    -ms-transition:.3s;
 +
    -o-transition:.3s;
 +
    transition:.3s
 +
}
 +
.slider_bar span:hover{background:#333;background:rgba(0,0,0,0.7)}
 +
.slider_bar span.active{background:#F40;background:rgba(255,68,0,0.9);cursor:default}
 +
</style>
 +
<script>
 +
jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d)},easeOutQuad:function(x,t,b,c,d){return -c*(t/=d)*(t-2)+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+0.75)+b}else{if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+0.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+0.984375)+b}}}}});String.prototype.format=function(){var args=arguments;var reg=/\{(\d+)\}/g;return this.replace(reg,function(g0,g1){return args[+g1]})};(function($){$.fn.will=function(callBack,type){type=type||"fx";return $.each(this,function(index,ele){$(ele).queue(type,function(next){callBack.call(this);next()})})}})(jQuery);(function($){function Slider(option){this.opt=$.extend(true,{},option);this.ele=$("#"+this.opt.id);this.inIt();this.begin()}Slider.prototype={cubeSize:{x:0,y:0},nowIndex:0,canChose:true,nextIndex:function(){var newIndex=this.nowIndex+1;if(newIndex>=this.opt.imgs.length){newIndex=0}return newIndex},inIt:function(){this.preLoad();this.fill();this.resize();var self=this;$(window).resize(function(){self.resize()})},preLoad:function(){var arr=this.opt.imgs;$.each(arr,function(index,url){var img=document.createElement("img");img.src=url})},begin:function(){var self=this;this.timer=setInterval(function(){var newIndex=self.nowIndex+1;if(newIndex>=self.opt.imgs.length){newIndex=0}self.choseImg(newIndex)},self.opt.interval)},stop:function(){clearInterval(this.timer)},fill:function(){var result='<div class="slider-box">';for(var x=0;x<this.opt.x;x++){for(var y=0;y<this.opt.y;y++){result+='<div id="{0}" class="{1}"><div class="slider_inner_a"></div><div class="slider_inner_b"></div></div>'.format(this.opt.id+"_"+x+"_"+y,"slider_cube")}}if(this.opt.showBar){result+='<div class="slider_bar">';result+=new Array(this.opt.imgs.length+1).join("<span></span>");result+="</div>"}result+="</div>";this.ele.html(result);this.ele.find(".slider_bar span").eq(this.nowIndex).addClass("active");this.eleBox=this.ele.children(".slider-box");this.bindEvents()},bindEvents:function(){var self=this;if(this.opt.showBar){this.eleBox.children(".slider_bar").off().on("click","span",function(){var eleSpan=$(this);self.choseImg(eleSpan.index())})}if(this.opt.urls.length<=0){return}self.eleBox.find(".slider_cube").off().click(function(){window.location.href=self.opt.urls[self.nowIndex]||"javascript:void(0);"}).css("cursor","pointer");self.eleBox.off().mouseenter(function(){self.stop()}).mouseleave(function(){self.begin()})},resize:function(){this.eleBox.height(this.eleBox.width()/this.opt.scale);var eleWid=this.eleBox.width(),eleHei=this.eleBox.height();var xSize,ySize;if(this.opt.border){xSize=(eleWid-this.opt.x+1)/this.opt.x;ySize=(eleHei-this.opt.y+1)/this.opt.y}else{xSize=eleWid/this.opt.x;ySize=eleHei/this.opt.y}this.cubeSize={x:xSize,y:ySize};if(this.opt.x==1){xSize=eleWid}if(this.opt.y==1){ySize=elehei}var borLen=this.opt.border?1:0;for(var x=0;x<this.opt.x;x++){for(var y=0;y<this.opt.y;y++){$("#"+this.opt.id+"_"+x+"_"+y).css({"left":x*xSize+x*borLen+"px","top":y*ySize+y*borLen+"px","width":xSize+"px","height":ySize+"px"}).find(".slider_inner_a,.slider_inner_b").css({"background-image":"url({0})".format(this.opt.imgs[this.nowIndex]),"background-position":"{0}px {1}px".format(-x*xSize,-y*ySize),"background-size":"{0}px {1}px".format(eleWid,eleHei)})}}},choseImg:function(index){var self=this;if(index==self.nowIndex){return}if(!self.canChose){return}self.canChose=false;setTimeout(function(){self.canChose=true},self.opt.delay+200);this.nowIndex=index;var url=this.opt.imgs[index];this.effectIndex=this.effectIndex||0;if(this.effectIndex>=this.effects.length){this.effectIndex=0}this.effects[this.effectIndex](this,url);this.effectIndex++;if(self.opt.showBar){self.eleBox.children(".slider_bar").find("span").removeClass("active").eq(self.nowIndex).addClass("active")}},effects:[function(self,url){var delayItem=self.opt.delay/(self.opt.x*self.opt.y);effectTemplate(self.opt,function(eleA,eleB,x,y){eleA.css({"top":-self.cubeSize.y+"px","background-image":"url({0})".format(url)});var delayTime=(x+(self.opt.x*y))*delayItem*4/5;eleA.delay(delayTime).animate({"top":"0"},{duration:delayItem*10,easing:"easeOutBounce"});eleB.delay(delayTime).animate({"top":self.cubeSize.y+"px"},{duration:delayItem*10,easing:"easeOutBounce"}).will(function(){$(this).css({"top":"0","background-image":"url({0})".format(url)})})})},function(self,url){var delayItem=self.opt.delay/self.opt.x;effectTemplate(self.opt,function(eleA,eleB,x,y){eleA.css({"left":-self.cubeSize.x+"px","background-image":"url({0})".format(url)});var delayTime=x*delayItem;eleA.delay(delayTime).animate({"left":"0"},{duration:delayItem*2});eleB.delay(delayTime).animate({"left":self.cubeSize.x+"px"},{duration:delayItem*2}).will(function(){$(this).css({"left":"0","background-image":"url({0})".format(url)})})})},function(self,url){var delayItem=self.opt.delay/(self.opt.x*self.opt.y);
 +
effectTemplate(self.opt,function(eleA,eleB,x,y){eleA.css({"opacity":"0","background-image":"url({0})".format(url)});var delayTime=(x+(self.opt.x*y))*delayItem;eleA.delay(delayTime).animate({"opacity":"1"},{duration:delayItem*4,});eleB.delay(delayTime).animate({"opacity":"0"},{duration:delayItem*4,}).will(function(){$(this).css({"opacity":"1","background-image":"url({0})".format(url)})})})},function(self,url){var delayArr=[0];var delayItem=self.opt.delay/(self.opt.x*self.opt.y);for(var i=1,len=self.opt.x*self.opt.y;i<len;i++){delayArr[i]=delayArr[i-1]+delayItem}delayArr.sort(function(a,b){return Math.random()>0.5?1:-1});effectTemplate(self.opt,function(eleA,eleB,x,y){var directionIndex=Math.floor(Math.random()*4);var cssName=["top","left","top","left"][directionIndex];var cssValue=[-self.cubeSize.y,self.cubeSize.x,self.cubeSize.y,-self.cubeSize.x][directionIndex];var obj={};obj[cssName]=cssValue+"px";obj["background-image"]="url({0})".format(url);eleA.css(obj);var delayTime=delayArr[x+y*self.opt.x];obj={};obj[cssName]="0";eleA.delay(delayTime*3/4).animate(obj,delayItem*4);obj={};obj[cssName]=-cssValue+"px";eleB.delay(delayTime*3/4).animate(obj,delayItem*4).will(function(){obj={};obj[cssName]="0";obj["background-image"]="url({0})".format(url);$(this).css(obj)})})}]};function effectTemplate(opt,callback){for(var y=0;y<opt.y;y++){for(var x=0;x<opt.x;x++){var eleBox=$("#{0}_{1}_{2}".format(opt.id,x,y));var eleA=eleBox.children(".slider_inner_a");var eleB=eleBox.children(".slider_inner_b");callback(eleA,eleB,x,y)}}}function getRandomId(){return Math.random().toString(36).substr(2).replace(/\d/g,"")}$.fn.slider=function(option,obj){if(typeof option=="object"){var defaults={imgs:[],urls:[],x:2,y:2,scale:4/3,delay:800,interval:5000,border:false};return $.each(this,function(index,ele){var opt=$.extend({},defaults,option);if(!ele.id){ele.id=getRandomId()}opt.id=ele.id;var slider=new Slider(opt);$(ele).data("slider",slider)})}else{if(typeof option=="string"){var slider=this.data("slider");slider.opt=$.extend({},slider.opt,obj||{});slider.inIt();slider.stop();slider.begin();if(typeof obj=="object"){slider[option]()}else{slider[option](obj)}return this}else{return this}}}})(jQuery);
 +
</script>
 +
<div style="margin-bottom: 20px;overflow: hidden;background-color:#fff;height:360px;">
 +
        <div id="imgBar" style="margin:0 0;">
 +
        </div>
 +
    </div>
 +
<!-- 启动 -->
 +
<script type="text/javascript">
 +
    $("#imgBar").slider({
 +
        imgs: [
 +
            "https://static.igem.org/mediawiki/2018/0/07/T--NEU_China_B--ast0.jpg",
 +
"https://static.igem.org/mediawiki/2018/4/41/T--NEU_China_B--ast1.jpg",
 +
"https://static.igem.org/mediawiki/2018/9/92/T--NEU_China_B--ast2.jpg"],
 +
        scale: 4,
 +
        border: true,
 +
        delay: 2200,
 +
        x: 10,
 +
        y: 3
 +
    });
 +
</script>
 +
 +
<canvas id="base_page" width="800" height="400" style="">
 
您的浏览器不支持 HTML5 canvas 标签。
 
您的浏览器不支持 HTML5 canvas 标签。
 
</canvas>
 
</canvas>
 
<script>
 
<script>
−
var width = 800;
+
var width = 800;
−
var height = 400;
+
var height = 400;
  
−
var c = document.getElementById("base_page");
+
var c = document.getElementById("base_page");
−
var ctx = c.getContext("2d");
+
−
that = ctx;
+
−
var i = 0;
+
−
var pi = Math.PI;
+
−
var basex = 400;
+
−
var basey = 200;
+
−
var imgx;
+
−
var imgy;
+
  
−
var w1 = "https://static.igem.org/mediawiki/2018/a/a8/T--NEU_China_B--w1.png";
+
$("#base_page").attr("width", c.parentElement.clientWidth);
−
var w2 = "https://static.igem.org/mediawiki/2018/f/f9/T--NEU_China_B--w2.png";
+
−
var w3 = "https://static.igem.org/mediawiki/2018/2/27/T--NEU_China_B--w3.png";
+
−
var w4 = "https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--w4.png";
+
−
var w5 = "https://static.igem.org/mediawiki/2018/7/7a/T--NEU_China_B--w5.png";
+
−
var img1 = new Image();
+
−
var img2 = new Image();
+
−
var img3 = new Image();
+
−
var img4 = new Image();
+
−
var img5 = new Image();
+
−
img1.src = w1;
+
−
var during = 40;
+
−
var t1 = 0;
+
−
var base_t1 = 0;
+
−
var t2 = 0;
+
−
var base_t2 = base_t1 + during;
+
−
var t3 = 0;
+
−
var base_t3 = base_t2 + during;
+
−
var t4 = 0;
+
−
var base_t4 = base_t3 + during;
+
−
var t5 = 0;
+
−
var base_t5 = base_t4 + during;
+
  
−
var x_e = 200;
+
var ctx = c.getContext("2d");
−
var y_e = 100;
+
that = ctx;
−
+
var i = 0;
−
function redraw() {
+
var pi = Math.PI;
−
ctx.clearRect(0, 0, width, height);
+
var basex = c.width / 2;
 +
var basey = c.height / 2;
 +
width = c.width;
 +
height = c.height;
 +
var imgx;
 +
var imgy;
  
−
var i = 0;
+
var w1 = "https://static.igem.org/mediawiki/2018/a/a8/T--NEU_China_B--w1.png";
−
ctx.beginPath();
+
var w2 = "https://static.igem.org/mediawiki/2018/f/f9/T--NEU_China_B--w2.png";
−
var x = x_e * Math.cos(0 * 180 * 2) + basex;
+
var w3 = "https://static.igem.org/mediawiki/2018/2/27/T--NEU_China_B--w3.png";
−
var y = y_e * Math.sin(0 * 180 * 4) + basey;
+
var w4 = "https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--w4.png";
−
ctx.moveTo(x, y);
+
var w5 = "https://static.igem.org/mediawiki/2018/7/7a/T--NEU_China_B--w5.png";
−
for (i = 0; i < 0.05; i += 0.00001) {
+
var w6 = "https://static.igem.org/mediawiki/2018/6/66/T--NEU_China_B--w6.png";
−
var x = x_e * Math.cos(i * 180 * 2) + basex;
+
−
var y = y_e * Math.sin(i * 180 * 4) + basey;
+
−
ctx.lineTo(x, y);
+
−
}
+
−
ctx.stroke();
+
−
ctx.closePath();
+
  
−
}
+
var img1 = new Image();
 +
var img2 = new Image();
 +
var img3 = new Image();
 +
var img4 = new Image();
 +
var img5 = new Image();
 +
var img6 = new Image();
 +
img1.src = w1;
 +
var during = 40;
 +
var t1 = 0;
 +
var base_t1 = 0;
 +
var t2 = 0;
 +
var base_t2 = base_t1 + during;
 +
var t3 = 0;
 +
var base_t3 = base_t2 + during;
 +
var t4 = 0;
 +
var base_t4 = base_t3 + during;
 +
var t5 = 0;
 +
var base_t5 = base_t4 + during;
 +
var t6 = 0;
 +
var base_t6 = base_t5 + during;
  
−
function draw(x, y, r) {
+
var x_e = 300;
−
ctx.beginPath();
+
var y_e = 150;
−
ctx.arc(x, y, r, 0, Math.PI * 2, true);
+
−
ctx.fillStyle = "red";
+
−
ctx.fill();
+
−
ctx.closePath();
+
−
}
+
  
−
function drawImg(imgWarpper, x, y) {
+
var tipsWarpper = {};
−
var img = imgWarpper.img;
+
−
var drawWidth = img.width / 4;
+
−
var drawHeight = img.height / 4;
+
−
var imx = x - drawWidth / 2;
+
−
var imy = y - drawHeight / 2
+
−
imgWarpper.x = imx;
+
−
imgWarpper.y = imy;
+
−
ctx.drawImage(img, imx, imy, drawWidth, drawHeight);
+
−
}
+
  
−
var imgWarpper1 = {};
 
−
var imgWarpper2 = {};
 
−
var imgWarpper3 = {};
 
−
var imgWarpper4 = {};
 
−
var imgWarpper5 = {};
 
  
−
imgWarpper1.img = img1;
+
function redraw() {
−
imgWarpper2.img = img2;
+
ctx.clearRect(0, 0, width, height);
−
imgWarpper3.img = img3;
+
−
imgWarpper4.img = img4;
+
−
imgWarpper5.img = img5;
+
  
−
img1.onload = function () {
+
var i = 0;
−
img2.src = w2;
+
ctx.beginPath();
−
img2.onload = function () {
+
var x = x_e * Math.cos(0 * 180 * 2) + basex;
−
img3.src = w3;
+
var y = y_e * Math.sin(0 * 180 * 4) + basey;
−
img3.onload = function () {
+
ctx.moveTo(x, y);
−
img4.src = w4;
+
for (i = 0; i < 0.05; i += 0.00001) {
−
img4.onload = function () {
+
var x = x_e * Math.cos(i * 180 * 2) + basex;
−
img5.src = w5;
+
var y = y_e * Math.sin(i * 180 * 4) + basey;
−
img5.onload = function () {
+
ctx.lineTo(x, y);
−
console.log("finish");
+
}
−
var timer = setInterval(function () {
+
ctx.strokeStyle = '#FAF0E6';
−
redraw();
+
ctx.lineWidth = 3;
−
i += 0.00001;
+
ctx.stroke();
 +
ctx.closePath();
  
−
t1 = i + base_t1;
+
}
−
t2 = i + base_t2;
+
−
t3 = i + base_t3;
+
−
t4 = i + base_t4;
+
−
t5 = i + base_t5;
+
  
−
var img1_x = x_e * Math.cos(t1 * 180 * 2) + basex;
+
function draw(x, y, r) {
−
var img1_y = y_e * Math.sin(t1 * 180 * 4) + basey;
+
ctx.beginPath();
 +
ctx.arc(x, y, r, 0, Math.PI * 2, true);
 +
ctx.fillStyle = "red";
 +
ctx.fill();
 +
ctx.closePath();
 +
}
 +
function drawTips(x, y, w, h, msg) {
 +
// ctx.beginPath();
 +
// ctx.rect(x, y, w, h);
 +
// ctx.fillStyle = 'white';
 +
// ctx.fill();
 +
// ctx.closePath();
 +
ctx.beginPath();
 +
ctx.font = 'italic 40pt Calibri';
 +
ctx.fillStyle = 'yellow';
 +
ctx.fillText(msg, x, y);
 +
ctx.fill();
 +
ctx.closePath();
 +
}
  
−
drawImg(imgWarpper1, img1_x, img1_y);
+
function drawImg(imgWarpper, x, y) {
 +
var img = imgWarpper.img;
 +
var drawWidth = img.width / 4;
 +
var drawHeight = img.height / 4;
 +
var imx = x - drawWidth / 2;
 +
var imy = y - drawHeight / 2
 +
imgWarpper.x = imx;
 +
imgWarpper.y = imy;
 +
ctx.drawImage(img, imx, imy, drawWidth, drawHeight);
 +
}
  
−
var img2_x = x_e * Math.cos(t2 * 180 * 2) + basex;
+
var imgWarpper1 = {};
−
var img2_y = y_e * Math.sin(t2 * 180 * 4) + basey;
+
var imgWarpper2 = {};
−
imgWarpper2.x = img2_x;
+
var imgWarpper3 = {};
−
imgWarpper2.y = img2_y;
+
var imgWarpper4 = {};
−
// imgWarpper2.w = i
+
var imgWarpper5 = {};
−
drawImg(imgWarpper2, img2_x, img2_y);
+
var imgWarpper6 = {};
  
 +
imgWarpper1.img = img1;
 +
imgWarpper2.img = img2;
 +
imgWarpper3.img = img3;
 +
imgWarpper4.img = img4;
 +
imgWarpper5.img = img5;
 +
imgWarpper6.img = img6;
  
−
var img3_x = x_e * Math.cos(t3 * 180 * 2) + basex;
+
img1.onload = function () {
−
var img3_y = y_e * Math.sin(t3 * 180 * 4) + basey;
+
img2.src = w2;
−
drawImg(imgWarpper3, img3_x, img3_y);
+
img2.onload = function () {
 +
img3.src = w3;
 +
img3.onload = function () {
 +
img4.src = w4;
 +
img4.onload = function () {
 +
img5.src = w5;
 +
img5.onload = function () {
 +
var timer = setInterval(function () {
 +
redraw();
 +
i += 0.00001;
  
−
var img4_x = x_e * Math.cos(t4 * 180 * 2) + basex;
+
t1 = i + base_t1;
−
var img4_y = y_e * Math.sin(t4 * 180 * 4) + basey;
+
t2 = i + base_t2;
−
drawImg(imgWarpper4, img4_x, img4_y);
+
t3 = i + base_t3;
 +
t4 = i + base_t4;
 +
t5 = i + base_t5;
  
 +
var img1_x = x_e * Math.cos(t1 * 180 * 2) + basex;
 +
var img1_y = y_e * Math.sin(t1 * 180 * 4) + basey;
  
−
var img5_x = x_e * Math.cos(t5 * 180 * 2) + basex;
+
drawImg(imgWarpper1, img1_x, img1_y);
−
var img5_y = y_e * Math.sin(t5 * 180 * 4) + basey;
+
−
drawImg(imgWarpper5, img5_x, img5_y);
+
  
−
// if (y > 400) {
+
var img2_x = x_e * Math.cos(t2 * 180 * 2) + basex;
−
// clearInterval(timer);
+
var img2_y = y_e * Math.sin(t2 * 180 * 4) + basey;
−
// }
+
imgWarpper2.x = img2_x;
−
}, 10);
+
imgWarpper2.y = img2_y;
 +
// imgWarpper2.w = i
 +
drawImg(imgWarpper2, img2_x, img2_y);
 +
 
 +
 
 +
var img3_x = x_e * Math.cos(t3 * 180 * 2) + basex;
 +
var img3_y = y_e * Math.sin(t3 * 180 * 4) + basey;
 +
drawImg(imgWarpper3, img3_x, img3_y);
 +
 
 +
var img4_x = x_e * Math.cos(t4 * 180 * 2) + basex;
 +
var img4_y = y_e * Math.sin(t4 * 180 * 4) + basey;
 +
drawImg(imgWarpper4, img4_x, img4_y);
 +
 
 +
 
 +
var img5_x = x_e * Math.cos(t5 * 180 * 2) + basex;
 +
var img5_y = y_e * Math.sin(t5 * 180 * 4) + basey;
 +
drawImg(imgWarpper5, img5_x, img5_y);
 +
 
 +
 
 +
if (tipsWarpper.valid == true)
 +
drawTips(tipsWarpper.x, tipsWarpper.y, 100, 100, tipsWarpper.msg);
 +
// if (y > 400) {
 +
// clearInterval(timer);
 +
// }
 +
}, 50);
 +
}
 +
}
 
}
 
}
 
}
 
}
 
}
 
}
−
}
 
−
}
 
  
−
function contains(imgWarpper, x, y) {
+
function contains(imgWarpper, x, y) {
−
var img = imgWarpper.img;
+
var img = imgWarpper.img;
−
var rect = {};
+
var rect = {};
−
var drawWidth = img.width / 4;
+
var drawWidth = img.width / 4;
−
var drawHeight = img.height / 4;
+
var drawHeight = img.height / 4;
−
rect.x = imgWarpper.x;
+
rect.x = imgWarpper.x;
−
rect.y = imgWarpper.y;;
+
rect.y = imgWarpper.y;;
−
rect.x2 = drawWidth + rect.x;
+
rect.x2 = drawWidth + rect.x;
−
rect.y2 = drawHeight + rect.y;
+
rect.y2 = drawHeight + rect.y;
−
if (rect.x < x)
+
if (rect.x < x)
−
if (rect.x2 > x)
+
if (rect.x2 > x)
−
if (rect.y < y)
+
if (rect.y < y)
−
if (rect.y2 > y)
+
if (rect.y2 > y)
−
return true;
+
return true;
−
return false;
+
return false;
−
}
+
}
−
 
+
−
c.addEventListener('click', function (event) {
+
−
var x = event.clientX - c.getBoundingClientRect().left;
+
−
var y = event.clientY - c.getBoundingClientRect().top;
+
−
// console.log(x, y);
+
−
if (contains(imgWarpper1, x, y)) {
+
−
console.log("img 1");
+
−
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/background';
+
−
}
+
−
else if (contains(imgWarpper2, x, y)) {
+
−
console.log("img 2");
+
−
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Basic_Part';
+
−
}
+
−
else if (contains(imgWarpper3, x, y)) {
+
−
console.log("img3");
+
−
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Team';
+
−
}
+
−
else if (contains(imgWarpper4, x, y)) {
+
−
console.log("img4");
+
−
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/InterLab';
+
−
}
+
−
else if (contains(imgWarpper5, x, y)) {
+
−
console.log("img5");
+
−
// window.location.href = '';
+
−
}
+
−
});
+
−
 
+
−
</script>
+
  
 +
c.addEventListener('click', function (event) {
 +
var x = event.clientX - c.getBoundingClientRect().left;
 +
var y = event.clientY - c.getBoundingClientRect().top;
 +
// console.log(x, y);
 +
if (contains(imgWarpper1, x, y)) {
 +
console.log("img 1");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/background';
 +
}
 +
else if (contains(imgWarpper2, x, y)) {
 +
console.log("img 2");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Basic_Part';
 +
}
 +
else if (contains(imgWarpper3, x, y)) {
 +
console.log("img3");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Team';
 +
}
 +
else if (contains(imgWarpper4, x, y)) {
 +
console.log("img4");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/InterLab';
 +
}
 +
else if (contains(imgWarpper5, x, y)) {
 +
console.log("img5");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Human_Practices';
 +
}
 +
});
 +
c.onmousemove = function (event) {
 +
var x = event.clientX - c.getBoundingClientRect().left;
 +
var y = event.clientY - c.getBoundingClientRect().top;
 +
if (contains(imgWarpper1, x, y)) {
 +
tipsWarpper.x = x;
 +
tipsWarpper.y = y;
 +
tipsWarpper.valid = true;
 +
tipsWarpper.msg = "Background";
 +
}
 +
else if (contains(imgWarpper2, x, y)) {
 +
console.log("img 2");
 +
tipsWarpper.x = x;
 +
tipsWarpper.y = y;
 +
tipsWarpper.valid = true;
 +
tipsWarpper.msg = "Basic Part";
 +
}
 +
else if (contains(imgWarpper3, x, y)) {
 +
console.log("img3");
 +
tipsWarpper.valid = true;
 +
tipsWarpper.x = x;
 +
tipsWarpper.y = y;
 +
tipsWarpper.msg = "Team";
 +
}
 +
else if (contains(imgWarpper4, x, y)) {
 +
console.log("img4");
 +
tipsWarpper.x = x;
 +
tipsWarpper.y = y;
 +
tipsWarpper.msg = "InterLab";
 +
tipsWarpper.valid = true;
 +
}
 +
else if (contains(imgWarpper5, x, y)) {
 +
console.log("img5");
 +
tipsWarpper.x = x;
 +
tipsWarpper.y = y;
 +
tipsWarpper.msg = "Human_Practices";
 +
tipsWarpper.valid = true;
 +
}
 +
else {
 +
tipsWarpper.valid = false;
 +
}
 +
}
 +
</script>
 +
 
 
 
<hr>
 
<hr>
−
<div class="text-center">
+
<style>
 +
.abstract{
 +
background-color:#FAF0E6;
 +
};
 +
</style>
 +
<div class="text-center abstract">
 +
<div class="container">
 
<h2>
 
<h2>
 
Abstract
 
Abstract
 
</h2>
 
</h2>
 +
<hr>
 
The role of L-lactate is not always beneficial for the yogurt fermentation due to excessive L-lactate can provide an optimized growth condition for yeast and mold. Therefore, it is important to detect the concentration of L-lactate. Acid-base titration is a common method for it, but this method is complicated and time-consuming. In order to monitor L-lactate quickly and conveniently, we designed a biosensor for detecting L-lactate concentration by using the lldPRD L-lactate operon and QS system in E. coli. One of these parts is able to induce the lldPRD genes expression, LuxS protein, in the presence of L-lactate. LuxS protein catalyzes the SAM cycle and produces a small signaling molecule AI-2 that motivates our second part promoter of LsrA&K to promote GFP expression. The optic fiber is able to detect the GFP signal and convert it into current. Simultaneously, the entire device container will be made by 3D printing.
 
The role of L-lactate is not always beneficial for the yogurt fermentation due to excessive L-lactate can provide an optimized growth condition for yeast and mold. Therefore, it is important to detect the concentration of L-lactate. Acid-base titration is a common method for it, but this method is complicated and time-consuming. In order to monitor L-lactate quickly and conveniently, we designed a biosensor for detecting L-lactate concentration by using the lldPRD L-lactate operon and QS system in E. coli. One of these parts is able to induce the lldPRD genes expression, LuxS protein, in the presence of L-lactate. LuxS protein catalyzes the SAM cycle and produces a small signaling molecule AI-2 that motivates our second part promoter of LsrA&K to promote GFP expression. The optic fiber is able to detect the GFP signal and convert it into current. Simultaneously, the entire device container will be made by 3D printing.
  
Line 206: Line 329:
  
 
</div>
 
</div>
 +
<footer id="footer" class="footer section">
 +
<!-- Footer Top -->
 +
<div class="footer-top">
 +
<div class="container">
 +
<div class="row">
 +
 +
</div>
 +
</div>
 +
</div>
 +
<!--/ End Footer Top -->
 +
 +
<!-- Copyright -->
 +
<div class="copyright">
 +
<div class="container">
 +
<div class="row">
 +
<div class="copyright-content">
 +
 +
<div class="row">
 +
 +
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/2/28/T--NEU_China_B--tb1.png/799px-T--NEU_China_B--tb1.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/6/60/T--NEU_China_B--tb0.png/800px-T--NEU_China_B--tb0.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/5/52/T--NEU_China_B--tb3.png" alt="" class="sr">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/4/4f/T--NEU_China_B--tb2.png" alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/4/48/T--NEU_China_B--tb4.png" alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/b/be/T--NEU_China_B--tb5.png/799px-T--NEU_China_B--tb5.png"
 +
alt="" class="src">
 +
 +
</div>
 +
 +
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/b/b9/T--NEU_China_B--tb6.png/320px-T--NEU_China_B--tb6.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/d/d9/T--NEU_China_B--tb7.png/320px-T--NEU_China_B--tb7.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/4/4a/T--NEU_China_B--tb8.png/320px-T--NEU_China_B--tb8.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/4/47/T--NEU_China_B--tb9.png/799px-T--NEU_China_B--tb9.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/2/2d/T--NEU_China_B--tb10.png/202px-T--NEU_China_B--tb10.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/thumb/b/be/T--NEU_China_B--tb5.png/320px-T--NEU_China_B--tb5.png"
 +
alt="" class="src">
 +
<img height=20 src="https://static.igem.org/mediawiki/2018/4/4f/T--NEU_China_B--tb2.png" alt="" class="src">
 +
 +
</div>
  
 +
</div>
  
 +
</div>
 +
<ul class="social">
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
<!--/ End Copyright -->
 +
</footer>
  
 
</html>
 
</html>

Latest revision as of 03:39, 18 October 2018

Ruby - Responsive Corporate Tempalte

您的浏览器不支持 HTML5 canvas 标签。

Abstract

The role of L-lactate is not always beneficial for the yogurt fermentation due to excessive L-lactate can provide an optimized growth condition for yeast and mold. Therefore, it is important to detect the concentration of L-lactate. Acid-base titration is a common method for it, but this method is complicated and time-consuming. In order to monitor L-lactate quickly and conveniently, we designed a biosensor for detecting L-lactate concentration by using the lldPRD L-lactate operon and QS system in E. coli. One of these parts is able to induce the lldPRD genes expression, LuxS protein, in the presence of L-lactate. LuxS protein catalyzes the SAM cycle and produces a small signaling molecule AI-2 that motivates our second part promoter of LsrA&K to promote GFP expression. The optic fiber is able to detect the GFP signal and convert it into current. Simultaneously, the entire device container will be made by 3D printing.